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

您只需从input中选择p和.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/

P.S。您可以通过缓存选择器来进一步优化它。

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

$('.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。

Answer 2

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

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

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

请注意，在连续重新运行相同选项方面，这仍然非常低效;你可能想要

使用$ .data或其他方法缓存$ form.find（）调用的结果。
迭代输入，而不是使用$ .each（），这样一旦找到空的就可以中断（它会保存检查所有其余的）。无论如何，迭代也比$ .each（）更有效。

Answer 3

嗯，已经有其他几个答案，但我会添加我刚才写的那个。我也为它创建了一个jsfiddle。

$('.form input').keyup(function() {
    // get and store the current form we're inside of
    var thisform = $(this).parents('.form'),
        empty = false;

    // keep track of whether the form has been filled out or not
    $('input', thisform).each(function() {
        if ($(this).val() === '') {
            empty = true;
            return true;
        }
    });

    // set the display of this forms p tag element depending on whether
    // the form has been filled out or not
    $('p', thisform).css('display', (empty ? 'none' : 'block'));
});

更新

只是因为我做了，如果你想使用除jQuery之外的东西，这里是js：

$('.form input').keyup(function() {
    // get and store the current form we're inside of
    var thisform = $(this).parents('.form');

    // keep track of whether the form has been filled out or not
    var empty = $('input[value=]', thisform).length;

    // set the display of this forms p tag element depending on whether
    // the form has been filled out or not
    $('p', thisform).css('display', (empty ? 'none' : 'block'));
});

缩放jQuery函数而不重复代码

3 个答案:

更新