jquery - jquery这个选择器问题

Question

我想循环循环并在每次用户单击该框时显示状态消息，但现在它只执行一次。我知道问题出在next方法上，如何在循环执行结束之前显示 status_message？

http://jsfiddle.net/N8LMF/

HTML

    <input type='textbox' class='' name='change_box'>
    <div class='alert_message'></div>
    <input type='textbox' class='' name='change_box'>
    <div class='alert_message'></div>

jQuery

$(document).ready(function(){
    $('input[name=change_box]').live({
        blur: function(){
            var alert_message= $(this).next('.alert_message');
            for (var i=1; i<5; i++) {
                if(i%2 == 0) {
                    alert_message.removeClass().addClass('failure').text('failed').fadeOut(500);    
                }             
                else {
                    alert_message.removeClass().addClass('success').text('success').fadeOut(500);
                }
            }
        }
    });
});​

Answer 1

正如其他人所指出的，它不会因为 触发.removeClass，但还有另一个问题：您隐藏输入并且不再显示它。

您可能还应该使用.on而不是.live：

$(document).on('blur', 'input[name=change_box]', function () {
    var alert_message= $(this).next('.alert_message');
    ...
    alert_message.removeClass().addClass('failure alert_message').text('failed')
       //show so it can be faded out again
       .fadeOut(500, function () { $(this).show().text(''); });    
});

您必须对“成功”进行类似的更改

Answer 2

问题是因为removeClass()

这将删除所有类，因此您下次访问时无法选择该 div..

试试这个 if else 循环

if (i % 2 == 0) {
         alert_message.show()
                      .removeClass('success')
                      .addClass('failure').text('failed').fadeOut(500);
}
else {             
         alert_message.show()
                      .removeClass('failure')
                      .addClass('success').text('success').fadeOut(500);
}

检查小提琴

Answer 3

当您的代码执行此操作时removeClass()，它也会删除 alert_message 类，因此您无法在下一次通过时选择它。

你的 for 循环也不应该在那里。现在的编码方式是，每次触发事件时运行五次。那是你要的吗？

Answer 4

HTML：

<input type='textbox' class='' name='change_box' id='change_box'>
<div class='alert_message'></div>

Javascript：

$(document).ready(function(){
    $('#change_box').keyup(function() {
        alert('Something changed.');
    });
});