Jquery - .click（）在第一次嘗試後不會啓動

我有一個包含3個輸入字段和一個按鈕的div。當按鈕被點擊時，我的js啓動。我的JS檢查具有空值的輸入並將它們置於紅色背景中。一切工作正常。我的問題如下。讓我們想象以下情況：我只需輸入2個第一個輸入字段並單擊按鈕。會發生什麼是第三個輸入會變成紅色。正常。但是，當我然後將一些文本放入第三個輸入並重新點擊按鈕時，它不會切換爲紅色。我不明白。希望有人能幫忙。預先感謝您的回覆。乾杯。馬克。Jquery - .click（）在第一次嘗試後不會啓動

http://jsfiddle.net/g3b9S/

我的HTML：

<div id="userList"> 
    <input type="text" id="user1" class="verif" /><br> 
    <input type="text" id="user2" class="verif" /><br> 
    <input type="text" id="user3" class="verif" /><br> 
    <input type="submit" id="btn" /> 
</div>

我的JS：

$('#btn').click(function() { 

    var myArray = []; 

    var userList = $('#userList .verif'); 
    userList.each(function() { 
     var userID = $(this).attr('id'); 
     var userName = $(this).val(); 

     if (!userName) { 
      myArray.push({ 
       'id': userID, 
       'name': userName 
      }); 
     } 
    }); 

    $.each(myArray, function(i, v) { 
     $('#userList .verif[id=' + v.id + ']').css('background-color', 'red'); 
    }); 

});

來源

2012-03-02 Marc

您是否在javascript控制檯中看到錯誤？ – jrummell 2012-03-02 20:46:43

是否因爲你將DOM準備好了？ – uday 2012-03-02 20:47:58

jrummell和Dave>？ – Marc 2012-03-02 20:49:04

您不會刪除有效字段的背景顏色。您可以簡化整個事情到一個鏈接聲明：

$('#btn').click(function() { 
    $("#userList .verif") 
     .css('background-color', "") 
     .filter("[value='']") 
     .css('background-color', 'red'); 
});

例子：http://jsfiddle.net/eKwJn/

來源

2012-03-02 20:50:34

謝謝安德魯。像魅力一樣工作...... – Marc 2012-03-02 20:56:51

因爲在任何時候，你有沒有設置在該領域的背景回白色。一旦將其更改爲紅色，它將保持紅色。第一重設背景是這樣的：

$('input.verif').css('background-color', 'white');

Updated jsFiddle。

來源

2012-03-02 20:50:05 j08691

也像魅力一樣工作。感謝隊友.... – Marc 2012-03-02 20:57:38

當您達到您的$.each(...是myArray空的，因爲沒有一個文本框是空的。重置背景爲您在該功能上做的第一件事： http://jsfiddle.net/g3b9S/4/

來源

2012-03-02 20:52:15 MilkyWayJoe

也在工作。謝謝你MilkyWay ... – Marc 2012-03-02 20:58:47

您需要在重新驗證之前重置有效輸入。另外，我建議你使用語義類而不是內聯JS中的背景顏色。這會在以後的設計中給你更多的靈活性。

$('#btn').click(function() { 
    var userList = $(this).siblings('input.verif'); 
    // reset to white 
    userList.removeClass('invalid'); 

    // invalidate empty inputs 
    userList.each(function() { 
     var el = $(this); 
     if (el.val()=='') el.addClass('invalid'); 
    }); 
});

DEMO：http://jsfiddle.net/Bsywc/

而且，你可能要增加您的輸入自動在瀏覽器中驗證新的HTML5 required屬性。詳情請參閱http://24ways.org/2009/have-a-field-day-with-html5-forms

來源

2012-03-02 20:52:29

謝謝jens，它運作良好... – Marc 2012-03-02 20:57:03

Jquery - .click（）在第一次嘗試後不會啓動

回答

相關問題