Question

我对JS和jQuery很新，所以这可能是一个noob问题。我正在构建一个WordPress主题，选项页面允许用户选择他们想要多少个页脚小部件插槽，我们将其称为X，X的可能值为1-6。如果X = 4，那么我显示4个输入，然后他们可以指定每个插槽的宽度。

我还显示所有插槽的总计，以便用户始终知道它们是否为100％。我这样做的惯例很简单，但可能效率不高。我知道我可以通过循环执行此操作，但是现在我只了解如何添加文字输入：input_1 + input_2 + input_3等。

这适用于更改和keuyup事件，但问题是在页面加载时，我的例程不知道有多少输入是可见的，如果所有6个都没有，那么它没有正确添加值。我需要改变这个例程，如果没有使用输入，它假定值为0，即如果X = 4，则input_5和input_6被隐藏。

function displaytotal() {
    var num = 0;
    num = parseFloat($('#wa1').val(),10) + 
        parseFloat($('#wa2').val(),10) + 
        parseFloat($('#wa3').val(),10) + 
        parseFloat($('#wa4').val(),10) + 
        parseFloat($('#wa5').val(),10) + 
        parseFloat($('#wa6').val(),10);
    num = Math.round(num);
    if( isNaN(num) ) {
        $('#total100').val('???');
    } else {
        $('#total100').val(num);
        if( $('#total100').val() == 100 ) {
            $('#total100').css({"color":"green"});
        } else {
            $('#total100').css({"color":"red"});
        }
    }
}

Answer 1

当元素重复时，它是使用类名而不是ID的指示符。这样，具有匹配类选择器的任何元素都可以在循环中使用，无论有多少元素。

.filter(":visible")将仅选择那些可见的内容。

var num = 0
$('.myClass').filter(":visible").each(function() {
    num = num +  parseFloat($(this).val(),10)        
})

如何有效地添加在页面init上可能显示或未显示的输入值？

1 个答案: