Question

我设置了2个点击功能，第一个允许您点击并滚动.test div。在此之后，.test:last-child的目标是删除red类，添加blue类，然后在blue类div上触发单击函数，并隐藏它。唯一的问题是它似乎无法识别.blue div上的点击功能而无法正常工作。
jsFiddle演示： http://jsfiddle.net/neal_fletcher/adMYV/1/
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>

jQuery的：

$(document).ready(function () {
    $(".red").click(function () {
        var next;
        next = $(this).nextAll(".test");
        $('html, body').animate({
            scrollTop: next.offset().top
        }, "slow");
        return false;
    });
});


$(document).ready(function () {
    $('.test:last-child').removeClass('red').addClass('blue');
    $('.blue').click(function () {
        $(this).hide();
        return false;
    });
});

任何建议都将不胜感激！

Answer 1

试试这样：

http://jsfiddle.net/adMYV/3/

<强> CODE

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

Answer 2

您可以在.test选择器上执行click事件。并且在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');

}）;

看看http://jsfiddle.net/adMYV/4/

jQuery：此类的addClass和click函数

2 个答案: