嵌套 For 循环激活幻灯片并关闭另一个

Question

我有多个幻灯片，但只想要一个运行按 ID 选择。其余的关闭并隐藏。我有第一个加载onload。我有一个嵌套的 for 循环运行通过并打开和关闭它们。这不是一直有效。

网上找的一些代码。外层 for 循环甚至在选择任何 id 之前运行。我什至不知道在激活新滑块之前是否正确停止了活动滑块。我的循环似乎可以正常工作，只有警报，没有幻灯片代码。然后，当我介绍幻灯片时，它有时会起作用，但并不始终如一。选择 id 1 或 2 似乎可行，但有时它不会循环遍历嵌套的 3 或 4。某种冲突还是逻辑错误？请帮助这个绝望的初学者。我自愿为我们的合唱团做这件事
很抱歉，我无法正确格式化代码以供查看。

好的，我添加了 jsfiddle https://jsfiddle.net/5s0q30s8/

循环仅使用警报。

 <button id=1>Group Photos</button>
 <button id=2>Miscellaneous</button>
 <button id=3>Trips</button>
 <button id=4>Old Pictures</button>
<script>

    var buttons = document.getElementsByTagName("button");
    var buttonsCount = buttons.length;
    for (var i=0; i <= buttonsCount; i+=1){
        buttons[i].onclick=function(e){
        var id= this.id;
        alert(id + ' clicked');
        for (var i=1; i <= buttonsCount; i+=1){
             alert('nested for' + i);
             if (i != id) {
             var temp = ('.slider-wrapper ' + i)
             alert('Not id ' + temp);
             $('.slider-wrapper' + i).hide();
             /*  $('#slider' + i).hide(); */
             $('#slider' + i).data('nivoslider').stop(); 
              }
             else {
             alert('true '+ i);
             $('.slider-wrapper' + i).show();
             $('#slider' + i).nivoSlider({       effect: 'fade'       }  ); 
            } //end else

            } //end nested for
        };
    } //end for
  </script>

 <div class="slider-wrapper1 theme-default">
               <div id="slider1" class="nivoSlider">
                <img src="images/Choir2014.jpg" alt="" title="2014" />
                   ........More images.                           
                 </div>
 </div>

 <div class="slider-wrapper2 theme-default">
               <div id="slider2" class="nivoSlider">
                <img src="images/Choir2014.jpg" alt="" title="2014" />
                   ........More images.                           
                 </div>
 </div>
 <div class="slider-wrapper3 theme-default">
               <div id="slider3" class="nivoSlider">
                <img src="images/Choir2014.jpg" alt="" title="2014" />
                   ........More images.                           
                 </div>
 </div>
 <div class="slider-wrapper4 theme-default">
               <div id="slider4" class="nivoSlider">
                <img src="images/Choir2014.jpg" alt="" title="2014" />
                   ........More images.                           
                 </div>
 </div>
<script type="text/javascript">
$(window).load(function() {
    $('#slider1').nivoSlider({       effect: 'fade'       });
});

</script>

Answer 1

我必须说，你的代码在我眼里很乱。我确实看到您在使用 jQuery 方面做出了努力，所以我假设您能够使用它。

据我了解您的目标：

有 4 个滑块
有 4 个按钮
您单击一个按钮，相应的幻灯片就会出现。

$('#slideButtons button').click(function(){
  var id = $(this).attr("id");
  $('#content .slide:visible').hide();
  $('#content #c' + id).show();
  // Any other logic can be put here, like starting or stopping sliders.
});

/* Show the first slider, and hide everything else by applying display:none to it */
#content div:not(#c1) {
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="slideButtons">
  <button id="1">1</button>
  <button id="2">2</button>
  <button id="3">3</button>
  <button id="4">4</button>
</div>

<div id="content">
  <div class="slide" id="c1">Number 1! Put Slideshow 1 here.</div>
  <div class="slide" id="c2">Number 2! Put Slideshow 2 here.</div>
  <div class="slide" id="c3">Number 3! Put Slideshow 3 here.</div>
  <div class="slide" id="c4">Number 4! Put Slideshow 4 here.</div>
</div>

从这里您可以构建它。我相信那时它看起来也会更干净。此外，如果您要调试那么多警报，请尝试使用 console.log 而不是 alert。它的侵入性要小得多，您可以简单地阅读它。

嵌套 For 循环激活幻灯片并关闭另一个

Nested For Loop to activate slideshow and turn off another

slideshow