Javascript jQuery:addClass并单击该类的函数

我设置了两个单击功能，第一个功能允许您单击并滚动

.test

div。在此之后，

.test:last child

的目标是删除

红色

类，添加

蓝色

类，然后在

蓝色

类div上启动单击功能，并将其隐藏。唯一的问题是，它似乎无法识别

.blue

div上的单击功能，并且无法工作
JSFIDLE演示：
HTML:

<div class="test red"></div>
<div class="test red"></div>
<div class="test red"></div>
<div class="test red"></div>
<div class="test red"></div>

---

如有任何建议，将不胜感激

您可以在.test选择器上执行单击事件。 在click函数事件中，使用hasClass jquery函数，并在每种情况下根据需要进行操作

编辑： 像这样：

$(document).ready(function () {
$(".test").click(function () {
    if($(this).hasClass('red')) {
        var next;
        next = $(this).nextAll(".test");
        $('html, body').animate({
            scrollTop: next.offset().top
        }, "slow");
    } else if($(this).hasClass('blue')) {
        $(this).hide();
    }
    return false;
});
$('.test:last-child').removeClass('red').addClass('blue');

}))

看一看

像这样试试：

代码

$(document).on("click", ".blue", function () {
    $(this).hide();
    return false;
});

$(document).on("click", ".blue", function () {
    $(this).hide();
    return false;
});