我在 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) 指的是 change 事件正在作用的元素。

$(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);
  }
});
});