Question

所以我得到了：

var current = $('.article.active');

$('div').on("click", function() {
    if(current.next('.article').hasClass('hide')){
        $(current).addClass('hide');
        $(current).next('.article').removeClass('hide');
    };  
});

和Html：

<body>
    <div class="app">
        <div id="article0" class="article active"></div>
        <div id="article1" class="article hide"></div>
        <div id="article2" class="article hide"></div>
    </div>

因此，当我点击div时，代码可以正常运行，但只有一次。我想为每个div执行多次。

JSFIDDLE：http://jsfiddle.net/9xrpuru9/

Answer 1

您需要在点击处理程序中找到活动元素，还必须更改活动类

$('div.app').on("click", function () {
    var current = $('.article.active');
    $(current).addClass('hide').removeClass('active');
    if (current.next('.article').length) {
        $(current).next('.article').removeClass('hide').addClass('active');
    } else {
        $('.article:first').removeClass('hide').addClass('active');
    }
});

演示：Fiddle

Answer 2

您没有将活动类设置为下一篇文章div。

您可以尝试以下代码。

$('.article').on("click", function () {
        if ($(this).next('.article').hasClass('hide')) {
            $(this).addClass('hide').removeClass('active');
            $(this).next('.article').removeClass('hide').addClass('active');
        };
    });

Jquery on（'click'）....函数只执行一次

2 个答案: