JQuery的文本框裏面輸入時隱藏錯誤的div

我有錯誤的div當表單提交到服務器，將出現，JQuery的文本框裏面輸入時隱藏錯誤的div

<p> 
    <input id="first_name" class="form-control" type="text" name="first_name" onkeyup="remove_error()" placeholder="First Name"> \ 
    <span id="error_first_name" class="err alert alert-danger"> 
     The first name may only contain letters. 
     <br> 
     The first name must be at least 2 characters. 
    </span> 
</p>

我有這樣的代碼：

$("#first_name").keyup(function(e) 
{ 
    $("#error_first_name").fadeOut(); 
});

我計劃將其更改爲

<input id="first_name" class="form-control" type="text" name="first_name" onkeyup="remove_error()"placeholder="First Name">

這樣我就可以調用一個函數，它將刪除與'err'相同的div中的錯誤，類。這是可行的，如果我將所有輸入項目1鍵入1，我怎樣才能使它成爲一個功能，我可以打電話，並刪除所述的div？

function remove_error() 
    { 
     $(this).next(".err").fadeOut(); //get next div with err class and fadeout 
    }

來源

2014-11-01 Ponce

我拿到了自舉樣本中的div標籤。如果我切換它跨越它變得giberish – Ponce 2014-11-01 10:51:31

你可以定義一個類爲你的元素，它的驗證，然後使用同級淡出對KEYUP驗證元素

$(".validate").keyup(function (e) { 
    console.log($(this).siblings('.validator')); 
    $(this).siblings('.validator').fadeOut(); 
});

檢查此琴

http://jsfiddle.net/mfarouk/6vgnfam7/

來源

2014-11-01 10:59:40 mfarouk

我將使用這一個。感謝其他答案。 – Ponce 2014-11-01 11:13:57

@Ponce'.siblings（）'不是你所表達的問題的正確選擇。它會搜索整個父級匹配的元素，而實際上您只想訪問以下元素。不必要的DOM遍歷是一種不好的做法。此外，它不回答如何使用內聯處理程序或爲什麼你不應該使用它。順其自然的答案完全取決於你。 – 2014-11-01 11:31:09

最好不要使用內聯事件處理程序。你可以使用一個通用類的文本框，並做到：

$(".commonClass").keyup(function(e){ 
    $(this).next(".err").fadeOut(); 
});

如果必須使用內嵌處理器，那麼你應該使用this關鍵字傳遞到元素的引用：

<input id="first_name" class="form-control" type="text" name="first_name" onkeyup="remove_error(this)"placeholder="First Name">

而且

function remove_error(elm){ 
    $(elm).next(".err").fadeOut(); //get next div with err class and fadeout 
}

：你可以在函數中使用它

閱讀：Why is inline event handler attributes is a bad idea in modern semantic HTML?

來源

2014-11-01 10:54:30

這似乎沒有工作。。 \t \t \t $（「remove_err_onkeyup」）KEYUP（函數（e）中{ \t \t \t \t \t \t \t \t $（本）的.next（）淡出（） '犯錯。'; \t \t \t}）; – Ponce 2014-11-01 11:02:10

@Ponce它[似乎工作]（http://jsfiddle.net/6vgnfam7/1/）對我來說... – 2014-11-01 11:12:32

JQuery的文本框裏面輸入時隱藏錯誤的div

回答

相關問題