jquery .next（）と.prev（）は同じdiv内にあります

Question

私はjquery（実際にはWebデザイン/開発全体）に新しく、この階層パネルシステムをサイト（90％モバイル経由でアクセス）。私はかなり近いですが、私の問題が非常にうまくオンラインであるとは言い切れません。

はここでこれが正常に動作し、ネストされたカルーセルのような設定を取得するだけのミニプロジェクトですjsfiddle https://jsfiddle.net/o7x4r67w/1/

var main = function() { 
"use strict"; 
// Outer next arrow click 
$('.out-arrow-next').click(function() { 

// transition to the next outer slide 
var currentOuterSlide = $('.outer-active'); 
var nextOuterSlide = currentOuterSlide.next(); 

// reset to the beginning if we've reached the end 
if (nextOuterSlide.length === 0) { 
    nextOuterSlide = $('.outer').first(".outer"); 
} 

currentOuterSlide.hide(200).removeClass('outer-active'); 
nextOuterSlide.show(200).addClass('outer-active'); 

}); 

// Outer prev arrow click 
$('.out-arrow-prev').click(function() { 
// transition to the prevous outer slide 
var currentOuterSlide = $('.outer-active'); 
var prevOuterSlide = currentOuterSlide.prev(".outer"); 

// reset to the end if we've reached the beginning 
if (prevOuterSlide.length === 0) { 
    prevOuterSlide = $('.outer').last(); 
} 

currentOuterSlide.hide(200).removeClass('outer-active'); 
prevOuterSlide.show(200).addClass('outer-active'); 
}); 

// Inner next arrow click 
$('.in-arrow-next').click(function() { 
// transition to the next inner slide 
var currentinnerSlide = $('.inner-active'); 
var nextinnerSlide = currentinnerSlide.next(); 

// reset to the beginning if we've reached the end 
if (nextinnerSlide.length === 0) { 
    nextinnerSlide = $('.inner').first(".inner"); 
} 

currentinnerSlide.hide(200).removeClass('inner-active'); 
nextinnerSlide.show(200).addClass('inner-active'); 
}); 

// Inner prev arrow click 
$('.in-arrow-prev').click(function() { 
// transition to the previous inner slide 
var currentinnerSlide = $('.inner-active'); 
var previnnerSlide = currentinnerSlide.prev(".inner"); 

// reset to the end if we've reached the beginning 
if (previnnerSlide.length === 0) { 
    previnnerSlide = $('.inner').last(); 
} 

currentinnerSlide.hide(200).removeClass('inner-active'); 
previnnerSlide.show(200).addClass('inner-active'); 
}); 

}; 

$(document).ready(main); 

に私のコードですが、私は実際のサイトにそれを実装する予定。モバイル版には矢印の代わりにスワイプが表示されます。

基本的に何が起きているのかは、外側のパネルがうまく作業を切り替えることですが、内側のヒーローズリストを切り替えるとします。前回を押すと、2番目の外部クラスの最終内部リストがアクティブに設定されます。次のヒットは正しい第1アウターパネルのインヒーローをセットするが、第2をアクティブにする。両方のインナーパネルに「内部アクティブ」クラスが含まれているためですか？これは前と次の矢印の名前が同じであるためですか？その場合、1つのインスタンスごとにクリック機能を作成する必要がありますか？

ありがとうございます！

Answer 1

問題は要素の取得方法に関連しています。

使用：。$（この）.parent（）兄弟（ 'クラス名'）

がで詳細を参照してください。siblingsとparent

var main = function() { 
 
    "use strict"; 
 
    // Outer next arrow click 
 
    $('.out-arrow-next').click(function() { 
 

 
    // transition to the next outer slide 
 
    var currentOuterSlide = $(this).parent().siblings('.outer-active'); 
 
    var nextOuterSlide = currentOuterSlide.next(); 
 

 
    // reset to the beginning if we've reached the end 
 
    if (nextOuterSlide.length === 0) { 
 
     nextOuterSlide = $(this).parent().siblings(".outer:first"); 
 
    } 
 

 
    currentOuterSlide.hide(200).removeClass('outer-active'); 
 
    nextOuterSlide.show(200).addClass('outer-active'); 
 

 
    }); 
 

 
    // Outer prev arrow click 
 
    $('.out-arrow-prev').click(function() { 
 
    // transition to the prevous outer slide 
 
    var currentOuterSlide = $(this).parent().siblings('.outer-active'); 
 
    var prevOuterSlide = currentOuterSlide.prev(".outer"); 
 

 
    // reset to the end if we've reached the beginning 
 
    if (prevOuterSlide.length === 0) { 
 
     prevOuterSlide = $(this).parent().siblings('.outer:last'); 
 
    } 
 

 
    currentOuterSlide.hide(200).removeClass('outer-active'); 
 
    prevOuterSlide.show(200).addClass('outer-active'); 
 
    }); 
 

 
    // Inner next arrow click 
 
    $('.in-arrow-next').click(function() { 
 
    // transition to the next inner slide 
 
    var currentinnerSlide = $(this).parent().siblings('.inner-active'); 
 
    var nextinnerSlide = currentinnerSlide.next(); 
 

 
    // reset to the beginning if we've reached the end 
 
    if (nextinnerSlide.length === 0) { 
 
     nextinnerSlide = $(this).parent().siblings('.inner:first'); 
 
    } 
 

 
    currentinnerSlide.hide(200).removeClass('inner-active'); 
 
    nextinnerSlide.show(200).addClass('inner-active'); 
 
    }); 
 

 
    // Inner prev arrow click 
 
    $('.in-arrow-prev').click(function() { 
 
    // transition to the previous inner slide 
 
    var currentinnerSlide = $(this).parent().siblings('.inner-active'); 
 
    var previnnerSlide = currentinnerSlide.prev(".inner"); 
 

 
    // reset to the end if we've reached the beginning 
 
    if (previnnerSlide.length === 0) { 
 
     previnnerSlide = $(this).parent().siblings('.inner:last'); 
 
    } 
 

 
    currentinnerSlide.hide(200).removeClass('inner-active'); 
 
    previnnerSlide.show(200).addClass('inner-active'); 
 
    }); 
 

 
}; 
 

 
$(document).ready(main);

@charset "utf-8"; 
 

 
/* zocial */ 
 

 
[class*="entypo-"]:before { 
 
    font-family: 'entypo', sans-serif; 
 
} 
 

 
*, 
 
*:before, 
 
*:after { 
 
    -moz-box-sizing: border-box; 
 
    -webkit-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
} 
 

 
.outer { 
 
    display: none; 
 
} 
 

 
.outer-active { 
 
    display: block; 
 
} 
 

 
.inner { 
 
    display: none 
 
} 
 

 
.inner-active { 
 
    display: block; 
 
}

<script src="https://code.jquery.com/jquery-1.12.1.min.js"></script> 
 

 
<div class="outmost-container"> 
 
    <!--Outer Nest--> 
 

 
    <!--Outer Nest Nav--> 
 
    <div class="out-nav"> 
 
     <a href="#" class="out-arrow-prev"><img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/arrow-prev.png"></a> 
 
     &nbsp;&nbsp;&nbsp;&nbsp;Outer&nbsp;&nbsp;&nbsp;&nbsp; 
 
     <a href="#" class="out-arrow-next"><img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/arrow-next.png"></a> 
 
    </div> 
 
    <!--End of Outer Nest Nav--> 
 

 
    <div class="outer outer-active"> 
 
     <!--Inner Nest--> 
 
     Outer 1 
 
     <!--Inner Next Nav--> 
 
     <div class="in-nav"> 
 
      <a href="#" class="unique in-arrow-prev"><img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/arrow-prev.png"></a> 
 
      &nbsp;&nbsp;&nbsp;&nbsp;Heroes&nbsp;&nbsp;&nbsp;&nbsp; 
 
      <a href="#" class="unique in-arrow-next"><img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/arrow-next.png"></a> 
 
     </div> 
 
     <!--End of Inner Nest Nav--> 
 

 
     <div class="inner inner-active"> 
 
      Odysseus 
 
     </div> 
 

 
     <div class="inner"> 
 
      Hercules 
 
     </div> 
 

 
     <div class="inner"> 
 
      Batman 
 
     </div> 
 

 
     <!--End of Inner Nest--> 
 
    </div> 
 

 
    <div class="outer"> 
 
     Outer 2 
 
     <!--Inner Next Nav--> 
 
     <div class="in-nav"> 
 
      <a href="#" class="in-arrow-prev"><img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/arrow-prev.png"></a> 
 
      &nbsp;&nbsp;&nbsp;&nbsp;Monsters&nbsp;&nbsp;&nbsp;&nbsp; 
 
      <a href="#" class="in-arrow-next"><img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/arrow-next.png"></a> 
 
     </div> 
 
     <!--End of Inner Nest Nav--> 
 

 
     <div class="inner inner-active"> 
 
      Dragon 
 
     </div> 
 

 
     <div class="inner"> 
 
      Chimera 
 
     </div> 
 

 
     <div class="inner"> 
 
      Ogre 
 
     </div> 
 
    </div> 
 

 
    <div class="outer"> 
 
     Outer 3 
 
    </div> 
 
    <!--End of Outer Nest--> 
 
</div>

`

Answer 2

正しいトラックにいると、inner-activeクラスに問題があることを示唆しています各ブロック.outer内で使用される。しかし、これは簡単に克服することができます。たとえば、すべての.inner-active要素が返されるのではなく、影響を受けるコンテナ内のすべての要素が返されるように、内部のnextおよびprevクリックハンドラ内で選択している要素の範囲を指定する必要があります。

$('.in-arrow-next').click(function() { 
    var $container = $(this).parents('.outer'); 
    var currentinnerSlide = $container.find('.inner-active'); 
    var nextinnerSlide = currentinnerSlide.next(); 

    // reset to the beginning if we've reached the end 
    if (nextinnerSlide.length === 0) { 
     nextinnerSlide = $container.find('.inner').first(".inner"); 
    } 

    /* ... */ 
}); 

$('.in-arrow-next').click(function() { 
    var $container = $(this).parents('.outer'); 
    var currentinnerSlide = $container.find('.inner-active'); 
    var previnnerSlide = currentinnerSlide.prev(".inner"); 

    // reset to the end if we've reached the beginning 
    if (previnnerSlide.length === 0) { 
     previnnerSlide = $container.find('.inner').last(); 
    } 

    /* ... */ 
});