Question

我显示的是可变价格，但我只想显示所选/选择的价格。

我的代码如下：下拉菜单中带有输入字段的可变价格

<ul>
<li class="km-price-options" id="price_option_115_ssize">
    <label>
    <input type="radio" name="options[price_id][]" id="price_option_115_1" class="price_option_115" value="1" data-price="9.95">
    <span>S Size</span> 
    </label>
</li>
<li class="km-price-options" id="price_option_115_msize">
    <label>
    <input type="radio" checked="checked" name="options[price_id][]" id="price_option_115_2" class="price_option_115" value="2" data-price="19.25">
    <span>M Size</span> 
    </label>
</li>

<li class="km-price-options" id="price_option_115_xsize">
    <label>
    <input type="radio" name="options[price_id][]" id="price_option_115_3" class="price_option_115" value="3" data-price="99.50">
    <span>X Size</span> 
    </label>
</li>
...
</ul>

页面上其他地方的价格

<div class="km-item-price"> 

<div class="km-price km-price-option-1">
    <div class="km-item-price">$9.95</div>
</div>

<div class="km-price km-price-option-2 checked">
    <div class="km-item-price">$19.25</div>
</div>

<div class="km-price km-price-option-3">
    <div class="km-item-price">$99.50</div>
</div>

...

</div>

默认情况下，选中选项2。例如，在下拉菜单中选择了选项1，我希望checked类从km-price-option-2中移除并添加到km-price-option-1内。对于输入字段checked="checked"也是如此。

到目前为止，我的jquery代码如下：

$('input:radio').change(function(){
    if($(this).is(":checked")) {
        $('.km-price').addClass("checked");
    } else {
        $('.km-price').removeClass("checked");
    }
});

这将在名为checked的所有div上添加km-price类名。但它应该限于value="1"（输入）。这有可能与jquery？如果有，怎么样？如果有更好的方法，我会全力以赴。：）

Answer 1

将单选按钮的值附加到要将checked类添加到的类。

$('input:radio').click(function(){
    $('.km-price').removeClass("checked");
    $('.km-price-option-' + this.value).addClass("checked");
});

由于它是一个单选按钮，因此您无需测试$(this).is(":checked")。您单击的按钮始终是已选中的按钮。

Answer 2

请花一点时间阅读Decoupling Your HTML, CSS, and JavaScript。

HTML：

<input type="radio" 
       name="options[price_id][]" 
       id="price_option_115_3" 
       class="price_option_115 js-update-checked" 
       value="3" 
       data-price="99.50"
       data-target=".km-price-option-3">

jQuery的：

$('.js-update-checked').on("click", function(){
  $('.km-price').removeClass("checked");
  var selector = $(this).data("target");
  $(selector).addClass("checked");
});

现在向页面添加新的单选按钮不会导致这组单选按钮发生奇怪的事情。它现在也完全可重用和可扩展。

Answer 3

以下是基于.index()并使用:eq()的示例。

＆＃13;

$('input:radio').change(function() {
  $('.km-price').removeClass("checked");
  $('.km-price:eq(' + $(this).index('input:radio') + ')').addClass("checked");
});

＆＃13;

.checked {
  color: red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="km-price-options" id="price_option_115_ssize">
    <label>
      <input type="radio" name="options[price_id][]" id="price_option_115_1" class="price_option_115" value="1" data-price="9.95">
      <span>S Size</span> 
    </label>
  </li>
  <li class="km-price-options" id="price_option_115_msize">
    <label>
      <input type="radio" checked="checked" name="options[price_id][]" id="price_option_115_2" class="price_option_115" value="2" data-price="19.25">
      <span>M Size</span> 
    </label>
  </li>

  <li class="km-price-options" id="price_option_115_xsize">
    <label>
      <input type="radio" name="options[price_id][]" id="price_option_115_3" class="price_option_115" value="3" data-price="99.50">
      <span>X Size</span> 
    </label>
  </li>
</ul>

<div class="km-item-price">

  <div class="km-price km-price-option-1">
    <div class="km-item-price">$9.95</div>
  </div>

  <div class="km-price km-price-option-2 checked">
    <div class="km-item-price">$19.25</div>
  </div>

  <div class="km-price km-price-option-3">
    <div class="km-item-price">$99.50</div>
  </div>
</div>

＆＃13;

如果选中输入字段，请添加css类

3 个答案: