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>');
        }
    });
});

这是更新的小提琴：https://jsfiddle.net/voveson/9rspxhjy/2/

希望它有所帮助！

jQuery - 没有显示全部和额外的div？

1 个答案:

JS