我有多个选项可供用户选择。在我的实际代码中,他们一次只能选择一个选项(由于某种原因,它在代码片段中不起作用)。我正在做的是从数据属性获取价格并将其写入页面的不同部分。
我相信我的问题是由 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>
最佳答案
您可以使用.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>
关于javascript - 选择更改事件的替代方案,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42304988/