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

您必须为＆＃34;成功＆＃34;

进行类似的更改

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);
}

<强> Check Fiddle

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