javascript - 显示和隐藏类中的上一个和下一个元素

Question

我正在尝试创建一种旋转木马，它以一种在单击下一个和上一个按钮时隐藏和显示图像的方式工作。我已将我的图像分组在一个表中，并为 li 元素指定了一个“li”类。我有四张图片，当我加载页面时，默认情况下第一张图片是唯一显示的。当我单击下一个按钮时，它会从第一张图片跳到第四张。之后，当我按下上一个按钮时，它会显示图像一、二和三。

如何让它按顺序显示？下面是我的代码。

https://jsfiddle.net/aj4tpu1z/

var prev = $('.prev');
var next = $('.next');

    $('.li').each(function() {
        var left = $(this).prev();
        var right = $(this).next();

        next.on('click', function(){    
            left.hide();
            right.show();
        });

        prev.on('click', function(){
            left.show();
            right.hide();
        });
    }); 

Answer 1

那是因为您的 .next 和 .prev 有四个(尽可能多的图像)点击处理程序，每个图像一个(因为你在循环中应用它)。所以当你点击时，所有四个都被执行，但最后一个是第四个元素，所以它留在最后。

您需要在点击的那一刻计算下一个/上一个。所以最好为当前图像添加一个类，并使用它来设置样式。

var prev = $('.prev');
var next = $('.next');
var images = $('.images li');

function showImage( node ){
  node.addClass('active') // show specified node
      .siblings().removeClass('active'); // hide previously active node
}

prev.on('click', function(e){
  e.preventDefault(); // avoid scrolling to top or following the link
  
  var previousNode = images.filter('.active').prev();
  showImage(previousNode);
});
next.on('click', function(e){
  e.preventDefault(); // avoid scrolling to top or following the link
  
  var nextNode = images.filter('.active').next();
  showImage(nextNode);
});

$('.images li:first').addClass('active');

.images li{display:none;}
.images li.active{display:initial}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<a href="#" class="prev">&#8592;</a>
<a href="#" class="next">&#8594;</a>


<div class="images">
  <ul>
    <li><img src="http://dummyimage.com/200x200?text=1" alt=""></li>
    <li><img src="http://dummyimage.com/200x200?text=2" alt=""></li>
    <li><img src="http://dummyimage.com/200x200?text=3" alt=""></li>
    <li><img src="http://dummyimage.com/200x200?text=4" alt=""></li>
  </ul>
</div>