Question

我有多个选项供用户选择。在我的实际代码中，他们一次只能选择一个选项（由于某种原因，它不能在代码段中工作）。我正在做的是从数据属性中获取价格并将其写入页面的不同部分。

我认为我的问题源于change功能。如果用户取消选择他们的选项并点击另一个选项，则会同时获取这两个价格...或者如果他们单击并取消选中相同的选项。因此，它不是只有一个价格，而是可以这样做：

13美元，13美元，15美元，17美元，13美元

如何才能显示有效的已检查数据价格？

请忽略calcTotalPrice()功能的错误。这与我的问题无关。感谢

var calPrice = [];
var limitCal = 1;
$('.calendar-check').on('change', function() {
  if (!this.checked || $('.calendar-check:checked').length <= limitCal) {
    $('.calendar-check:checked').each(function() {
      calPrice.push($(this).data('cal-price'));
    });
    $('#pg-price-review').html("$ " + calPrice);
    calcTotalPrice();
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
A
<input type="checkbox" class="calendar-check" data-cal-price="13" id="cal-glance" value="At-A-Glance Calendar"> 
B
<input type="checkbox" class="calendar-check" data-cal-price="15" id="cal-glance" value="At-A-Glance Calendar"> 
C
<input type="checkbox" class="calendar-check" data-cal-price="17" id="cal-glance" value="At-A-Glance Calendar">

<p id="pg-price-review" class="small-description margin15"></p>

Answer 1

您可以使用.map()将所选元素替换为属性值，并使用Array.prototype.join()将数组转换为字符串。最后在html中写字符串。

$('.calendar-check').on('change', function() {
  var str = $('.calendar-check:checked').map(function() {
    return "$" + $(this).data('cal-price');
  }).toArray().join(" ");
  $('#pg-price-review').html(str);
});

$('.calendar-check').on('change', function() {
  var str = $('.calendar-check:checked').map(function() {
    return "$" + $(this).data('cal-price');
  }).toArray().join(" ");
  $('#pg-price-review').html(str);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
A<input type="checkbox" class="calendar-check" data-cal-price="13" id="cal-glance" value="At-A-Glance Calendar"> 
B<input type="checkbox" class="calendar-check" data-cal-price="15" id="cal-glance" value="At-A-Glance Calendar"> 
C<input type="checkbox" class="calendar-check" data-cal-price="17" id="cal-glance" value="At-A-Glance Calendar">
<p id="pg-price-review" class="small-description margin15"></p>

选择更改事件的替代方案

1 个答案: