javascript - 选择更改事件的替代方案

Question

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

我相信我的问题是由 change 函数引起的。如果用户取消选择他们的选项并单击另一个选项，则会采用这两个价格......或者如果他们单击并取消单击同一选项。因此，它可能会这样做，而不是只有一个价格:

13 美元、13 美元、15 美元、17 美元、13 美元

如何只显示活跃的已检查数据价格？

请忽略 calcTotalPrice() 函数的错误。这与我的问题无关。谢谢

jsfiddle if you prefer to look at that.

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>