javascript - jQuery .next() 进入不正确的 Div)

Question

这个基本代码片段是为了更改索引 div 的类而编写的。特别是带有 .primaryCategory 类的 div。现在这个函数运行得很好，当你点击正确的箭头时，它会进入 .next() 和 .prev() ，但是当你进入 next 超过 3 次时(因为在这种情况下只有 3 个 div)，它会移动到箭头分隔线。 (仅在 .primaryCategory-leftArrow 中，一旦切换到分隔线(不应该如此)，左/上一个箭头将不再转到上一个。

所以基本上我要问的是如何才能使下一个/右箭头不会继续到 .primaryCategory-leftArrow

JavaScript/jQuery 代码片段

$(".wrapper .primaryCategory-wrapper .primaryCategory-RightArrow").bind(eventtype, function(e) {
    if($("div.primaryCategory.primaryCategory-active").is(":last-child")){
        // do nothing
    }else {
        $("div.primaryCategory.primaryCategory-active").removeClass("primaryCategory-active").next().addClass("primaryCategory-active");
    }
});

$(".wrapper .primaryCategory-wrapper .primaryCategory-leftArrow").bind(eventtype, function(e) {
    if($("div.primaryCategory.primaryCategory-active").is(":first-child")){
        // do nothing
    }else {
        $("div.primaryCategory.primaryCategory-active").removeClass("primaryCategory-active").prev().addClass("primaryCategory-active");
    }
});

HTML 代码片段

        <div class="primaryCategory-wrapper">
            <!-- Single Primary Category -->
            <div class="primaryCategory">
                <!-- Primary Category Icon -->
                <img class="primaryCategory-icon" alt="primaryCategory" src="img/placeholder/primaryCategoryIcon-320x320.png">
                <!-- Primary Category Heading -->
                <h1>Lorium</h1>
            </div>
            <!-- Single Primary Category -->
            <div class="primaryCategory">
                <!-- Primary Category Icon -->
                <img class="primaryCategory-icon" alt="primaryCategory" src="img/placeholder/primaryCategoryIcon-320x320.png">
                <!-- Primary Category Heading -->
                <h1>Lorium</h1>
            </div>
            <!-- Single Primary Category -->
            <div class="primaryCategory">
                <!-- Primary Category Icon -->
                <img class="primaryCategory-icon" alt="primaryCategory" src="img/placeholder/primaryCategoryIcon-320x320.png">
                <!-- Primary Category Heading -->
                <h1>Lorium</h1>
            </div>
            <div class="primaryCategory-leftArrow"><!-- Left Primary Arrow (Mobile) --></div>
            <div class="primaryCategory-RightArrow"><!-- Right Primary Arrow (Mobile) --></div>
        </div>

Answer 1

这是因为您的 .primaryCategory-leftArrow 和 .primaryCategory-RightArrow 位于 .primaryCategory 的同一父元素上，它们都是 sibling 。

要解决此问题，您可以从 .primaryCategory-wrapper 中移动 .primaryCategory-leftArrow 和 .primaryCategory-RightArrow。

或者您可以在 .next('selector') 上指定一个选择器，如下所示:

$("div.primaryCategory.primaryCategory-active").removeClass("primaryCategory-active").next(".primaryCategory").addClass("primaryCategory-active");

这只会检索具有 primaryCategory 类的下一个同级。

<小时/>

但是点击右箭头超过3次将会丢失事件类

您需要添加一个条件来解决此问题，这是一个更好的解决方案:

$(".primaryCategory-wrapper .primaryCategory-RightArrow").bind("click", function(e) {

    if(!$("div.primaryCategory.primaryCategory-active").is("div.primaryCategory:last")){
        $("div.primaryCategory.primaryCategory-active").removeClass("primaryCategory-active").next().addClass("primaryCategory-active");
    }
});

$(".primaryCategory-wrapper .primaryCategory-leftArrow").bind("click", function(e) {
    if(!$("div.primaryCategory.primaryCategory-active").is("div.primaryCategory:first")){
        $("div.primaryCategory.primaryCategory-active").removeClass("primaryCategory-active").prev().addClass("primaryCategory-active");
    }
});

这是一个 fiddle