Question

这个基本的代码片段是为了改变索引div的类而编写的。具体为.primaryCategory类的div。现在这个函数效果很好，当你点击正确的箭头时它会变成.next（）和.prev（），但当你下次超过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 CODE代码段

        <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

我相信这是因为leftArrow和RightArrow被包裹在其他<div>元素的同一级别。您可以优化标记为的标记周围的包裹，或者将箭头元素移动到上一级：

<强> HTML

<div class="primaryCategory-wrapper">
    <div class="primaryCategory-subwrapper">
        <!-- 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>
        <div class="primaryCategory-leftArrow"><!-- Left Primary Arrow (Mobile) --></div>
        <div class="primaryCategory-RightArrow"><!-- Right Primary Arrow (Mobile) --></div>
</div>

此外，你应该重新构建条件子句，这样你就不会得到一个空的

<强>的JavaScript

$(".wrapper .primaryCategory-wrapper .primaryCategory-RightArrow").bind(eventtype, function(e) {
    if(!($("div.primaryCategory.primaryCategory-active").is(":last-child"))) {
        $("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"))) {
        $("div.primaryCategory.primaryCategory-active").removeClass("primaryCategory-active").prev().addClass("primaryCategory-active");
    }
});

Answer 2

这是因为您的.primaryCategory-leftArrow和.primaryCategory-RightArrow位于.primaryCategory的同一父元素上，他们都是兄弟姐妹。

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

或者您可以在.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

jQuery .next（）进入不正确的Divs）

2 个答案: