jquery .next（）和.prev（）在同一個div內

Question

我是jquery（實際上，一般網頁設計/開發）的新手，並且試圖讓這個層級面板系統進入一個站點（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); 

這只是一個小項目，拿到嵌套旋轉木馬般建立正常工作的代碼，然後我計劃將其落實到實際的站點。移動版本將有一個滑動而不是箭頭。

基本上發生了什麼是外面板切換工作就好了，但說我切換內心的'英雄'名單。點擊前面將設置第二個外部類的最終內部列表爲激活狀態。接下來擊中將設置正確的第一外板的內心英雄，但也將第二個設置爲激活。這是因爲我的內部面板都包含「內部活動」類嗎？或者是因爲上一個和下一個箭頭被命名爲相同？如果是這樣的話，這是否意味着我不得不爲每個實例創建一個點擊功能？

在此先感謝！

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

你正處於正確的軌道上，暗示類貝因有一個問題g在每個.outer塊內使用。但是，這可以很容易地克服。您需要確定在內部next和prev點擊處理程序中選擇的元素的範圍，以便例如返回頁面上的所有.inner-active元素，但僅返回受影響容器內的元素。

$('.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(); 
    } 

    /* ... */ 
});