0

この基本的なコード スニペットは、インデックス付き div のクラスを変更するために作成されました。具体的には、クラス .primaryCategory の div です。これで関数はうまく機能し、正しい矢印をクリックすると .next() と .prev() に進みますが、次に 3 回以上進むと (この場合は div が 3 つしかないため)、矢印の仕切り。(.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-leftArrowand.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");
    }
});

そして、ここにフィドルがあります

于 2013-11-07T02:39:45.057 に答える