Jquery數組。如何一次顯示匹配if語句的數組元素？

Question

這是我的腳本：

<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> 

我想，以顯示其發生在一次所有的錯誤，但現在它只是一個顯示錯誤消息。預先感謝您的答案。

Answer 1

你有多個問題。

問題1：首先，如果沒有錯誤，索引零會發生什麼？它是未定義的。

解決方案：使用push，不要設置索引。

問題2：其次，你只是在循環中設置innerHTML，所以你不斷重寫它。

解決方案：加入陣列

問題3：您VAL（）檢查將無法正常工作，

解決方案：您需要檢查的長度

$('.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(); 
    } 

} 

Answer 2

而不是每次都在寫你的HTML，開始追加：

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

追加錯誤的ul可能更合適，但是這將讓你開始。

Answer 3

嘗試error.join('')代替迭代，如果你想使用，則循環追加HTML而不是壓倒一切的更新元素

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

}); 

它

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

Answer 4

要回答這個問題：你會覆蓋每個錯誤的#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(). 
} 
... 

Answer 5

注意.html()：

當的.html（）用於設置元素的含量，這是該元素中的任何內容完全被新的內容所取代。

因此，您總是將#errors的內容從錯誤[0]替換爲錯誤[長度-1]，僅隨時有一條錯誤消息。

我建議使用.append()：

的.append（）方法插入指定內容jQuery的集合中的每個元素