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

您走在正确的轨道上，表明每个inner-active块中使用的.outer类存在问题。但是，这很容易克服。您需要在内部next和prev click处理程序中确定要选择的元素范围，以便例如不返回页面上的所有.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();
    }

    /* ... */
});

Answer 2

问题与你如何获得元素有关。

使用：$（this）.parent（）。siblings（'classname'）

详情请参阅：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>

`