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

您的思路是正确的，表明每个 .outer block 中使用的 inner-active 类存在问题。然而，这很容易克服。您需要确定在内部 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();
    }

    /* ... */
});