將多個span元素添加到div元素

Question

晚上好，對於看似微不足道的問題表示歉意。

我似乎無法圍繞我想要完成的事情圍繞我的大腦。我覺得我錯過了一些直截了當的事情。

我想將多個跨度添加到一個錯誤div，以便當輸入和字段失去焦點時，我可以刪除顯示錯誤開始的跨度。

$('.required').val(''); 
$('#insert').on('click', function() 
{ 
    var valid = true; 
    msg = ''; 
    sp = ''; 

    $('.required').each(function() 
    { 
     var reqs = $(this); 
     reqd = reqs.attr('name'); 

     if (!reqs.val()) 
     { 
      valid = false; 

      if (reqd == 'username') 
      { 
       reqdfn = 'ID' 
      } 
      else if (reqd == 'lastname') 
      { 
       reqdfn = 'Last Name' 
      } 
      else if (reqd == 'firstname') 
      { 
       reqdfn = 'First Name' 
      } 
      else if (reqd == 'country') 
      { 
       reqdfn = 'Country' 
      } 

      msg += reqdfn + ' cannot be blank. <br/>'; 
      reqs.css({'border': '1px solid #C33', 'background-color': '#F6CBCA'}); 
     } 
    }); 

    if (!valid) 
    { 
     //$('#error').html(''); 
     $('#error').slideDown(); 
     $('#error').append('<span class="' + reqd + '">' + msg + '<span>'); 
    } 
    else 
    { 
     alert('Submitted'); 
    } 
}); 

有一個撥弄它here

我一直在使用一個for循環試過，但不能完全肯定我需要什麼就擺在那裏。

我已經有一個谷歌和一個看看這裏，從我可以看到它需要一個for循環，但就像我說的，不太確定如何寫它。

當我查看Firebug並記錄了reqd的值時，它顯示爲正在使用的最後一個reqd。

我試過sp + = reqd，顯然這給了我所有reqd的價值，就像我期望的那樣。

我只是因爲我出錯的地方而難住。

任何指針將不勝感激。

謝謝。

Answer 1

我相信我明白...

只需推動$('#error').append('<span class="' + reqd + '">' + msg + '<span>');進入該領域的錯誤邏輯。這樣每個有錯誤的字段都會附加一個新的跨度。

然後你仍然可以在底部$('#error').slideDown();。

Answer 2

你需要把每個附加。 此外，我建議做一個對象，關鍵將是一個名字（從輸入），價值將是人名。它會縮短您的代碼。

$('.required').val(''); 
$('#insert').on('click', function(){ 
    var valid = true, 
     msg = '', 
     sp = ''; 

    var names = { 
     'username' : 'ID', 
     'lastname' : 'Last Name', 
     'firstname' : 'First Name', 
     'country' : 'Country' 
    }; 

    $('.required').each(function() { 
     var reqs = $(this); 
     reqd = reqs.attr('name'); 

     if (!reqs.val()) 
     { 
      valid = false; 
      reqdfn = names[reqd]; 

      msg += reqdfn + ' cannot be blank. <br/>'; 
      reqs.css({'border': '1px solid #C33', 'background-color': '#F6CBCA'}); 

      $('#error').append('<span class="' + reqd + '">' + msg + '<span>'); 
     } 
    }); 

    if (!valid) { 
     //$('#error').html(''); 
     $('#error').slideDown(); 

    } else { 
     alert('Submitted'); 
    } 
});