缩放jQuery函数而不重复代码

Question

下面的脚本用于隐藏段落,直到div.form中的所有文本字段都已填写完毕.

就像现在一样,为了揭示这些段落,我必须填写两个表格.我想要的是每个表单独立行事.换句话说,如果您填写第一个表格中的三个输入,则会显示第一个DIV中的段落.

我可以通过复制代码并添加更多类来实现这一点,但这显然不太理想.

HTML

<div class="form one">  
    <input type="text" />
    <input type="text" />
    <input type="text" />
    <p style="display:none">All inputs in this DIV contain text</p> 
</div>

<div class="form two">  
    <input type="text" />
    <input type="text" />
    <input type="text" />
    <p style="display:none">All inputs in this DIV contain text</p> 
</div>

jQuery的

$('.form input').keyup(function() {

    var empty = false;
    $('.form input').each(function() {
        if ($(this).val() == '') {
            empty = true;
        }
    });

    if (empty) {
        $('.form p').css('display', 'none');
    } else {
        $('.form p').css('display', 'block');
    }
});

Answer 1

你应该简单地选择inputs和pfrom .form:

$('.form input').keyup(function() {

    var empty = false,
        $form = $(this).parent();

    $form.find('input').each(function() {
        if ($(this).val() == '') {
            empty = true;
            return false; // stops the loop
        }
    });

    if (empty) {
        $form.find('p').css('display', 'none');
    } else {
        $form.find('p').css('display', 'block');
    }
});

这里是小提琴:http://jsfiddle.net/tGBGK/

PS你可以通过缓存选择器进一步优化它.

或者,您可以放弃循环,只使用属性选择器:

$('.form input').keyup(function() {

    var $form = $(this).parent(),
        empty = $form.find('input[value=]').length;

    if (empty) {
        $form.find('p').css('display', 'none');
    } else {
        $form.find('p').css('display', 'block');
    }
});

...这里是小提琴:http://jsfiddle.net/tGBGK/1/

您可以使用三元运算符进一步缩短此时间:

$('.form input').keyup(function() {

    var $form = $(this).parent(),
        empty = $form.find('input[value=]').length;

    $form.find('p').css('display', empty ? 'none' : 'block');
});

...最后,这里是小提琴:http://jsfiddle.net/tGBGK/2/

谢谢@JesseB.