Question

假设我有三个相关的文本输入字段：

<input name="x1" class="xField" value="" /><div class="note" style="display:none;">Match</div>
<input name="x2" class="xField" value="" /><div class="note" style="display:none;">Match</div>
<input name="x3" class="xField" value="" /><div class="note" style="display:none;">Match</div>

现在，当任何这些更改的值发生变化，并且它匹配另一个其中一个相关字段的值时，我想“取消隐藏”.note div每个输入都有匹配值。

所以，这就是我到目前为止所做的：

$(function() {
    $(".xField").change(updateCommentsDisplay);

    function updateCommentsDisplay() {
        var $aVisibleNotes = [];

        $(".xField").each(function() {
            // If more than one field with the same value, add the next note div to an array
            if ($(".xField[value="+$(this).val()).length > 1)
                $aVisibleNotes.push($(this).next(".note");
        });

        $.each($aVisibleNotes, function(){
            $(this).show();
        });
    }
});

这感觉效率不高。我觉得我应该能够在没有循环的情况下做到这一点。有什么建议吗？

Answer 1

要做到没有循环，只需使用选择器。如果您不希望输入显示其后面的注释，请同时指定not(this)。

$(".xField").keyup(function(){
    var val=$(this).val();       
    $('.xField[value='+val+']').not(this).next(":hidden").show();
});

Answer 2

您可以组合选择器来获得结果.... xField，相同值，不同输入=显示下一个音符。

$('.xField').change(function() {
    var x = $(this);
    $('.xField[value="' + x.val() + '"]')
            .not(this).next('.note').show();
});

Answer 3

不是循环遍历每个输入，只需使用选择器来查找其值匹配的输入：

$(function() {
    $(".xField").change(function(){
        var field_val = $(this).val();
        $(".xField[value='" + field_val + "']").show();
    });
});

Answer 4

首先，你应该保存$（“。xField'）;

的结果

所以：

$(function() {
    var xFields = $('.xField');
    xFields.change(updateCommentsDisplay);

    function updateCommentsDisplay() {
        var $aVisibleNotes = [];

        xFields.each(function() {
            // If more than one field with the same value, add the next note div to an array
            if(xFields.find('[value="' + $(this).val() + '"]').size() > 1)
                $aVisibleNotes.push($(this).next(".note");
        });

        $.each($aVisibleNotes, function(){
            $(this).show();
        });
    }
});

使用实际值比较而不是Sizzle引擎来查找匹配项可能会更快。你想在jsperf上测试它，但我有预感。

Answer 5

如果匹配或没有匹配则打开和关闭它们：

$(".xField").change(function() {
        updateCommentsDisplay();
});

function updateCommentsDisplay() {
    $(".xField").each(function() {
        if ($(".xField[value=" + $(this).val() + "]").length > 1) {
            $(this).next(".note").show();
        }
        else {
            $(this).next(".note").hide();
        };
    });
};

查看实际操作：http://jsfiddle.net/MarkSchultheiss/UrBEk/

基于使用jQuery匹配表单输入值来执行操作的最有效方法是什么？

5 个答案: