Jquery数组.如何同时显示与if语句匹配的数组元素

Jquery Array. How to display array elements that match if statements at once?

本文关键字：语句 数组元素 if 数组 何同时 显示 Jquery      更新时间：2023-09-26

这是我的脚本：

 <script>
 $('.change_password_button').click(function() {
    var error = [];
    if (!$('.password').val()) {
        error[0] = "Current password field is empty.";
    }
    if (!$('.new_password').val()) {
        error[1] = "New password field is empty.";
    }
    if (!$('.confirm_password').val()) {
        error[2] = "Confirm password field is empty.";
    }
    if ($('.new_password').val() != $('.confirm_password').val()) {
        error[3] = "Your new password and confirm password fields do not match.";
    }
    for (var i = 0; i < error.length; i = i + 1) {
        $('#errors').show();
        $('#errors').html(error[i]);
    }
});
 </script>

我想同时显示所有错误，但现在只显示一条错误消息。提前感谢您的回答。

您有多个问题。

问题1:首先，如果没有错误，索引0会发生什么？它是未定义的。

解决方案：使用推送，不要设置索引。

问题2:第二，您只是在循环中设置innerHTML，以便不断覆盖它。

解决方案：加入阵列

问题3：您的价值（）检查将不起作用，

解决方案：您需要检查的长度

$('.change_password_button').click(function(){
    var error = [];  
    if (!$('.password').val().length) {   
        error.push("Current password field is empty.");   
    };
    if (!$('.new_password').val().length) { 
        error.push("New password field is empty.");   
    };
    if (!$('.confirm_password').val().length) { 
        error.push("Confirm password field is empty.");   
    };
    if ($('.new_password').val() != $('.confirm_password').val()) { 
        error.push("Your new password and confirm password fields do not match.");   
    };
    if(error.length) {
        $('#errors').html( error.join("<br/>").show();
    } else {
        $('#errors').hide();
    }
}

尝试error.join('')，而不是迭代和更新元素

$('.change_password_button').click(function () {
    var error = [];
    if (!$('.password').val()) {
        error.push("Current password field is empty.");
    };
    if (!$('.new_password').val()) {
        error.push("New password field is empty.");
    };
    if (!$('.confirm_password').val()) {
        error.push("Confirm password field is empty.");
    };
    if ($('.new_password').val() != $('.confirm_password').val()) {
        error.push("Your new password and confirm password fields do not match.");
    };
    $('#errors').show();
    $('#errors').html(error.join(''));
});

如果你想使用循环，那么附加html，而不是覆盖它

var $errors = $('#errors').empty()
for (var i = 0; i < error.length; i = i + 1) {
    $errors.append(error[i]);
}
$errors.show();

与其每次都重写HTML，不如开始添加：

var current = $('#errors').html();
$('#errors').html( current + " " + error[ i ] );

附加一个错误的ul可能更合适，但这会让你开始。

要回答这个问题：您为每个错误覆盖#errors元素的HTML，因此它最终只显示最后一个错误。您需要将每个错误消息附加到前一个错误消息。

您可以按照tymeJV的建议进行操作，但这需要每次运行循环时获取该div的HTML。jQuery已经提供了开箱即用的附加功能，为什么不使用它呢？jQuery团队为此付出了很多努力

...
$('#errors').show(); // Notice I moved this statement. Once it is shown, you do not need to show it again.
for (var i = 0; i < error.length; i = i + 1) {
    $('#errors').append(error[i]); // .append() instead of .html().
}
...

注意.html（）：

当使用.html（）设置元素的内容时，该元素中的任何内容都将被新内容完全替换

因此，您总是将#errors的内容从error[0]替换为error[length-1]，任何时候都只使用一条错误消息。

我建议使用.append（）：

.append（）方法将指定的内容作为jQuery集合中每个元素的最后一个子元素插入

相关文章：