javascript - jQuery - 总和额外的 div 未显示？

Question

我试图显示所选人员的总数，并在表单中添加额外的 div 数量

这是我的代码:fiddle ，但总人数没有显示，额外的 div 也不起作用。

这是一个示例:fiddle

出了什么问题？我怎样才能做到这一点？谢谢!

这是我的JS

$(document).ready(function(){
    var sum = 0;
    $(document).on('change', 'div select',function(){
        sum = 0;
       $('div select').each(function(){
           var thisVal = parseInt($(this).val());
           sum += thisVal;
       });
        $('#person-total').text(sum);
        // you can use here 

        // remove all divs
        $('div[class^="passenger"]').remove();
        // to show divs depending on number of persons
        for(var i = 1 ; i <= sum ; i++){
            $('body').append('<div class="passenger'+i+'"><label for="passenger_name">Passenger '+i+'</label><input name="passenger_name_'+i+'" type="text" id="passenger_name" placeholder="FIRSTNAME"><input name="passenger_lname_'+i+'" type="text" id="passenger_lname" placeholder="LASTNAME"><input name="passenger_age_'+i+'" type="text" id="passenger_age" placeholder="AGE"></div>');
        }
    });
});

我发现了我认为的问题，它计算了所有选定的选项。但是我该如何改变这个:

$(document).on('change', 'div select',function(){
        sum = 0;
       $('div select').each(function(){
           var thisVal = parseInt($(this).val());
           sum += thisVal;
       });

特别适合 1 个 div 工作？

Answer 1

这里的问题是您的“选择行程”下拉列表与选择器 'div select' 匹配，因此它包含在 .each() 循环中。所以当你打电话时

parseInt($(this).val());

最终得到 NaN，它代表“不是数字”。

我向应包含在此函数中的每个 select 元素添加了一个 “count-select” 类，并对 JavaScript 进行了如下修改:

JS

$(document).ready(function () {
    var sum = 0;
    $(document).on('change', '.count-select', function () {
        sum = 0;
        $('.count-select').each(function () {
            var thisVal = parseInt($(this).val());
            sum += thisVal;
        });
        $('#person-total').text(sum);
        // you can use here 

        // remove all divs
        $('div[class^="passenger"]').remove();
        // to show divs depending on number of persons
        for (var i = 1; i <= sum; i++) {
            $('body').append('<div class="passenger' + i + '"><label for="passenger_name">Passenger ' + i + '</label><input name="passenger_name_' + i + '" type="text" id="passenger_name" placeholder="FIRSTNAME"><input name="passenger_lname_' + i + '" type="text" id="passenger_lname" placeholder="LASTNAME"><input name="passenger_age_' + i + '" type="text" id="passenger_age" placeholder="AGE"></div>');
        }
    });
});

这是更新后的 fiddle :https://jsfiddle.net/voveson/9rspxhjy/2/

希望对你有帮助!