0

编写此基本代码片段是为了更改索引 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 代码片段

        <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>
4

2 回答 2

1

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

要解决此问题，您可以将您的.primaryCategory-leftArrowand.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");
    }
});

这是一个小提琴

于 2013-11-07T02:39:45.057 回答
1

我相信发生这种情况是因为leftArrowandRightArrow被包装在其他<div>元素的同一级别。您可以优化标记为的标签周围的环绕，也可以将<!-- Single Primary Category -->箭头元素移动上一层：

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>

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

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");
    }
});
于 2013-11-07T02:23:00.560 回答