将两个图像分配给无线按钮

Question

嗨，我有这个“产品”页面 (on Fiddle)，在这里，我有两个类的多个无线电台-- .choosesize和.choosetea。我想设置我的代码，如果选择了8盎司的单选按钮，那么所有的茶选择都会出现一组图片，如果选择了16盎司的单选按钮，则会出现另一组图片用于茶的选择。

我已经为每个茶选项分配了小的和大的图像，但是如果选择了小8盎司选项，我不知道如何显示小图片。

Answer 1

虽然您没有所有的“组合”图像，我已经添加了一个可能的解决方案。

  var size = "small"
  var teatype = "green"

  $('.choosetea input').on('click', function() {
    teatype = $(this).attr('data-image');
    console.log(size + "_" +teatype)
    $('.active').removeClass('active');
    $('.columnleft img[data-image = ' + size + "_" +teatype + ']').addClass('active');
    $(this).addClass('active');
  });

  $('.choosesize input').on('click', function() {
    size = $(this).attr('data-image');

    console.log(size + "_" +teatype)
    $('.active').removeClass('active');
    $('.columnleft img[data-image = ' + size + "_" +teatype + ']').addClass('active');
    $(this).addClass('active');
  });

因此，这将使size和teatype相形见绌，因此每个图像都有应该是size_teatype的数据图像。

​

$(document).ready(function() {
  var size = "small"
  var teatype = ""

  $('.choosetea input').on('click', function() {
    teatype = "_"+$(this).attr('data-image');
    console.log(size  +teatype)
    $('.active').removeClass('active');
    $('.columnleft img[data-image = ' + size  +teatype + ']').addClass('active');
    $(this).addClass('active');
  });

  $('.choosesize input').on('click', function() {
    size = $(this).attr('data-image');

    console.log(size  +teatype)
    $('.active').removeClass('active');
    $('.columnleft img[data-image = ' + size  +teatype + ']').addClass('active');
    $(this).addClass('active');
  });




  //local storage color



  //local storage size





  // add the value of the added radio boxes in the text box
  $('.radios1').change(function(e) {
    var selectedValue = parseInt($(this).val());
    selectedValue += parseInt($(".radios2").val());
    $('#amount').val('$' + selectedValue)

  });

  //add to cart

});



const sizeSelector = 'input:radio[id=small]';
const colorSelector = 'input:radio[id=green]';
const cartSelector = 'button[name=cart]';

$(function() {

  $(`${cartSelector}`).click(() => {
    validityCheck();
  });



  const SMALL = 20;
  const GREEN = 0;
  const CARTBUTTON = 5;

  function validityCheck() {
    let $size = $(`${sizeSelector}`);
    let $color = $(`${colorSelector}`);

    let size_flag = $size.is(':checked');
    let color_flag = $color.is(':checked');

    $('#itemdv1A').toggle(size_flag && color_flag) && $('#itemdv2A').toggle(size_flag && color_flag) && $('#yourbutton').toggle(size_flag && color_flag);

  }

});






const sizeSelector1 = 'input:radio[id=small]';
const colorSelector1 = 'input:radio[id=chamomile]';
const cartSelector1 = 'button[name=cart]';

$(function() {

  $(`${cartSelector}`).click(() => {
    validityCheck();
  });




  const CHAMOMILE = 1;


  function validityCheck() {
    let $size1 = $(`${sizeSelector1}`);
    let $color1 = $(`${colorSelector1}`);

    let size_flag1 = $size1.is(':checked');
    let color_flag1 = $color1.is(':checked');

    $('#itemdv1B').toggle(size_flag1 && color_flag1) && $('#itemdv2B').toggle(size_flag1 && color_flag1) && $('#yourbutton').toggle(size_flag1 && color_flag1)
  };

});


const sizeSelector2 = 'input:radio[id=small]';
const colorSelector2 = 'input:radio[id=oolong]';
const cartSelector2 = 'button[name=cart]';

$(function() {

  $(`${cartSelector}`).click(() => {
    validityCheck();
  });




  const OOLONG = 2;


  function validityCheck() {
    let $size2 = $(`${sizeSelector2}`);
    let $color2 = $(`${colorSelector2}`);

    let size_flag2 = $size2.is(':checked');
    let color_flag2 = $color2.is(':checked');

    $('#itemdv1C').toggle(size_flag2 && color_flag2) && $('#itemdv2C').toggle(size_flag2 && color_flag2) && $('#yourbutton').toggle(size_flag2 && color_flag2);

  }

});






document.querySelector('#yourbutton').onclick = function() {
  document.querySelector('#itemscart').style.display = "none"
};

/* Basic Styling */

.container {
  width: 1200px;
  top: 300px;
  left: 50px;
  padding: 15px;
  display: flex;
  position: absolute;
}


/* Columns */

.columnleft {
  width: 220%;
  position: relative;
  margin-left: 30px;
}

.columnright {
  width: 120%;
  top: 10px;
  margin-left: 80px;
  display: block;
}


/* Left Column */

.columnleft img {
  width: 100%;
  position: absolute;
  opacity: 0;
  transition: all 0.3s ease;
}

.columnleft img.active {
  opacity: 1;
}


/* Product Description */

.product-description {
  border-bottom: 1px solid #E1E8EE;
  margin-bottom: 20px;
}


/* Product Color */

.tea-type {
  margin-bottom: 30px;
}

.choosetea div {
  display: block;
  margin-top: 10px;
}

.label {
  width: 150px;
  float: left;
  text-align: left;
  padding-right: 9px;
}

.choosetea input {
  display: none;
}

.choosetea input+label span {
  display: inline-block;
  width: 40px;
  height: 40px;
  margin: -1px 4px 0 0;
  vertical-align: middle;
  cursor: pointer;
  border-radius: 50%;
}

.choosetea input+label span {
  border: 4px solid RGB(94, 94, 76)
}

.choosetea input#green+label span {
  background-color: #90978b;
}

.choosetea input#chamomile+label span {
  background-color: #ffd4a1;
}

.choosetea input#oolong+label span {
  background-color: #948e9e;
}

.choosetea input:checked+label span {
  background-image: url(check-icn.svg);
  background-repeat: no-repeat;
  background-position: center;
}


/* SIZE */

.tea-type {
  margin-bottom: 30px;
}

.choosesize div {
  display: block;
  margin-top: 10px;
}

.label {
  width: 100px;
  float: left;
  text-align: left;
  padding-right: 9px;
}

.choosesize input {
  display: none;
}

.choosesize input+label span {
  display: inline-block;
  width: 40px;
  height: 40px;
  margin: -1px 4px 0 0;
  vertical-align: middle;
  cursor: pointer;
  border-radius: 50%;
}

.choosesize input+label span {
  border: 4px solid RGB(94, 94, 76)
}

.choosesize input#small+label span {
  background-color: #252525;
}

.choosesize input#big+label span {
  background-color: #1d1d1d;
}

.choosesize input:checked+label span {
  background-image: url(https://noychat.github.io/Folia-Website/check-icn.svg);
  background-repeat: no-repeat;
  background-position: center;
}


/* Product Price */

.product-price {
  margin-top: 40px;
  display: flex;
  align-items: center;
}

.product-price span {
  font-size: 26px;
  font-weight: 300;
  color: #43474D;
  margin-right: 20px;
}

.cart-btn {
  display: inline-block;
  background-color: RGB(94, 94, 76);
  border-radius: 6px;
  font-size: 16px;
  color: #FFFFFF;
  text-decoration: none;
  padding: 12px 30px;
  transition: all .5s;
}

.cart-btn:hover {
  background-color: black;
}

.cart-btn2 {
  background-color: RGB(94, 94, 76);
  border-radius: 6px;
  font-size: 16px;
  color: #FFFFFF;
  text-decoration: none;
  padding: 12px 30px;
  transition: all .5s;
  width: 20px;
  position: absolute;
}

#amount {
  margin-right: 10px;
  display: inline-block;
  border-radius: 2px solid RGB(94, 94, 76);
  border-radius: 6px;
  font-size: 20px;
  color: RGB(94, 94, 76);
  width: 55px;
  height: 40px;
  padding-left: 10px;
  transition: all .5s;
}

#shoppingcart {
  width: 360px;
  height: 300px;
  /* border: 1px solid red; */
}

.item {
  margin-right: 10px;
  border-radius: 2px solid RGB(94, 94, 76);
  border-radius: 6px;
  font-size: 20px;
  color: RGB(94, 94, 76);
  width: 200px;
  height: 30px;
  padding-left: 10px;
  transition: all .5s;
  float: left;
}

.item1 {
  margin-right: 10px;
  border-radius: 2px solid RGB(94, 94, 76);
  border-radius: 6px;
  font-size: 20px;
  color: RGB(94, 94, 76);
  width: 55px;
  height: 30px;
  padding-left: 10px;
  transition: all .5s;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="header"></div>
<!--close all header portion-->
<div class="container">

  <!-- Left Column---Tea Images -->
  <div class="columnleft">
    <img data-image="oolong" src="https://noychat.github.io/Folia-Website/oolongbig.png" alt=" Big Oolong Can">
    <img data-image="chamomile" src="https://noychat.github.io/Folia-Website/chamomilebig.png" alt="Big Chamomile Can">
    <img data-image="green" class="active" src="https://noychat.github.io/Folia-Website/greenteabig.png" alt="Big Green Tea Can">
    <img data-image="small" class="active" src="https://noychat.github.io/Folia-Website/foliasmall.png" alt="Small Example Can">
    <img data-image="big" src="https://noychat.github.io/Folia-Website/foliabig.png" alt="Big Example Can">

    <img data-image="small_chamomile" src="https://noychat.github.io/Folia-Website/chamomilesmall.png" alt="Small Chamomile Can">
    <img data-image="small_oolong" src="https://noychat.github.io/Folia-Website/oolongsmall.png" alt="Small Oolong Can">
    <img data-image="small_green" src="https://noychat.github.io/Folia-Website/greenteasmall.png" alt="Small Green Tea Can">


  </div>


  <!-- Right Column -->
  <div class="columnright">

    <!-- Product Description -->
    <div class="product-description">
      <span>Folia Tea Collection</span>
      <h1>Signature Teas</h1>
      <p>We source our tea leaves from around the world. Try our many selections of teas and you will taste the difference.</p>
    </div>

    <!-- Product Configuration -->
    <div class="product-configuration">



      <!-- Tea Size -->
      <div class="tea-type">
        <h3>Size</h3>

        <div class="choosesize">
          <div>
            <input data-image="small" type="radio" id="small" name="size" value="20" class="radios1">
            <label for="small"><span></span></label>
            <div class="label">8 oz</div>
          </div>
          <div>
            <input data-image="big" type="radio" id="big" name="size" value="40" class="radios1">
            <label for="big"><span></span></label>
            <div class="label">16 oz</div>
          </div>

        </div>
        <!--CLOSE TEA Size-->

        <!-- Tea Type -->
        <div class="tea-type">
          <h3>Tea Type</h3>

          <div class="choosetea">
            <div>
              <input data-image="green" data-image1="small_green" type="radio" id="green" name="color" value="0" class="radios2">
              <label for="green"><span></span></label>
              <div class="label">Green Tea</div>
            </div>
            <div>
              <input data-image="chamomile" data-image1="small_chamomile" type="radio" id="chamomile" name="color" class="radios2" value="1">
              <label for="chamomile"><span></span></label>
              <div class="label">Chamomile Tea</div>
            </div>
            <div>
              <input data-image="oolong" data-image1="small_oolong" type="radio" id="oolong" name="color" class="radios2" value="2">
              <label for="oolong"><span></span></label>
              <div class="label">Oolong Tea</div>
            </div>
          </div>

        </div>
        <!--CLOSE TEA TYPE-->



        <h3>Product Pricing</h3>
        <div class="product-price">
          <input type="text" name="amount" id="amount">
          <button type="button" class="cart-btn" id="cartbutton" name="cart" value="5">Add To Cart!</button>


        </div>
      </div>



    </div>
    <!--close CONTAINER-->

    <div id="shoppingcart">
      <h3>Shopping Cart</h3>
      <h5>Item and Price</h5>
      <div id="itemscart">
        <div id="itemdv1A" style="display: none"> <input type="text" name="amount" class="item" value="8oz Green Tea"></div>
        <div id="itemdv2A" style="display: none"> <input type="text" name="amount" class="item1" value="$20"></div>

        <div id="itemdv1B" style="display: none"> <input type="text" name="amount" class="item" value="8oz Chamomile Tea"></div>
        <div id="itemdv2B" style="display: none"> <input type="text" name="amount" class="item1" value="$20"></div>

        <div id="itemdv1C" style="display: none"> <input type="text" name="amount" class="item" value="8oz Oolong Tea"></div>
        <div id="itemdv2C" style="display: none"> <input type="text" name="amount" class="item1" value="$20"></div>

        <button style="display: none" type="button" class="cart-btn2" id="yourbutton" name="remove" value="10">x</button>
      </div>
    </div>

​