有关旋转木马/滑块中选择器的混淆

Question

所以我对javascript / jquery很新。最近我创建了一个网站，根据你从旋转木马/滑块中选择的内容改变框架的颜色。

一切都是可操作的，唯一的问题是，我无法完全理解如何将选择器正确应用于我的轮播元素。

基本上我的旋转木马看起来像这样

我想要做的是，我已将第三个边框/框架设置为隐藏。 现在，只要您单击左箭头，最靠近左侧的元素将切换为隐藏，而右侧的图像将采用它的位置，并且将显示先前隐藏的图像

正好相反，我已经这样做了：

所以一切都按预期工作，唯一的问题是，这只会工作一次（主要是因为我不知道使用哪个选择器）。

为了把事情放到上下文中，我的HTML（特别是旋转木马）看起来像这样

    <div id="selector">
    <img id="goleft" src="images/left.png" />
    <div>
        <img id="blue" src="images/shot-blue.png" />
        <img id="yellow" src="images/shot-yellow.png" />
        <img id="red" src="images/shot-red.png" />
    </div>
    <img id="goright" src="images/right.png" />
</div>

没什么太难的

我的jQuery也是非常基本的

<script type="text/javascript">
    $(document).ready(function() {
      //Set the last (red) image to be hidden
      $("#selector div img:last").hide();
      // If we click left, hide the first one and show the last one
      $("#goleft").click(function(){
        $("#selector div img:first").hide('slow')
        $("#selector div img:last").show('slow')
      });
      // Similar for right
      $("#goright").click(function(){
        $("#selector div img:last").hide('slow')
        $("#selector div img:first").show('slow')
      });
    });
</script>

唯一的问题是，:first和:last选择器字面上选择第一个和最后一个图像而不是第一个可见和最后隐藏的元素

所以基本上我的旋转木马在第一次旋转后停止工作（两侧）

知道如何正确应用选择器以使旋转无穷无尽吗？

Answer 1

  

：first和：last selector选择第一个和最后一个   图像而不是第一个可见和最后隐藏的元素

您可以使用隐藏和可见选择器并使用jquery的最后和第一种方法：

$("#selector div img:hidden").first().show();    
$("#selector div img:visible").last().hide();

更新：请注意，您不能一个接一个地立即运行这些语句，否则您将对尚未隐藏的内容执行jquery execute语句。你可以做些什么来防止这种情况是在show和hide上使用回调函数，如下所示：

$("#selector div img:visible").last().hide('slow', function()
    {
      $("#selector div img:hidden").first().show('slow');
    }
);

这里也是一个完整实现的jsfiddle：

https://jsfiddle.net/4sh7cnub/

我使用了一些css而不是图像，所以你需要根据自己的情况将span改为img。