我在 webflow 中的 Javascript 仅适用于第一个 div。 我究竟做错了什么？ （单选按钮）

Question

所以我在 Webflow 中为我的丹麦网站创建了这个价格计算器。

我将 JS 写为$('element').on('change', function() {..})并且它确实有效。 但仅限于第一个 Div。

我想如果我把所有的 HTML 代码都放进去，那就太多了，所以我用相关的代码做了一个简短的版本。

 $(document).ready(function() { var total; $('.mulighed').on('change', function() { total += $("[type='radio']:checked").val(); $('#total').html('Kr. ' + $("[type='radio']:checked").val()); }); });

 .mulighed{margin: 25px;}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form> <div class='row'> <input type='radio' class='mulighed' value='5'></input> <input type='radio' class='mulighed' value='10'></input> <input type='radio' class='mulighed' value='15'></input> </div> <div class='row'> <input type='radio' class='mulighed' value='150'></input> <input type='radio' class='mulighed' value='50'></input> <input type='radio' class='mulighed' value='100'></input> </div> <div class='row'> <input type='radio' class='mulighed' value='1000'></input> <input type='radio' class='mulighed' value='1500'></input> <input type='radio' class='mulighed' value='500'></input> </div> <p id='total'>0</p> </form>

Answer 1

您需要先将值转换为整数， $(this)是指更改事件正在作用的元素。

$(document).ready(function() {

var total=0;

  $('.mulighed').on('change', function() {
    total += parseInt($(this).val());
    $('#total').html('Kr. ' +total);
});
});

更新：以下代码也允许您减去。

$(document).ready(function() {
var total=0;
$('input').on('click', function(e) {
  //e.preventDefault();
  if(!$(this).data("log")){
    $(this).prop("checked", true)
    $(this).data("log",true)
    total += parseInt($(this).val());
    $('#total').html('Kr. ' +total);
  }
  else{
    $(this).prop('checked', false);
    $(this).data("log",false)
    total -= parseInt($(this).val());
    $('#total').html('Kr. ' +total);
  }
});
});