JS滑塊演示失敗，沒有明顯的錯誤？

我已經建立（或正在嘗試構建）一個響應滑塊，但我看到一些奇怪的東西，即沒有工作？控制檯告訴我有上線55到意外的標記是下面的第一行：JS滑塊演示失敗，沒有明顯的錯誤？

$.each($slides.function(index){ 
     // Create a button element for the button 
     var $button = $('<button type="button" class="slide-btn">&bull;</button>'); 
     if (index === currentIndex) { 
      $button.addClass('active'); 
     } 
     $button.on('click', function(){ 
      move(index); 
     }).appendTo('.slide-buttons'); 
     buttonArray.push($button); 
    });

55號線，說明該標記無效的I已經創建了一個演示這是function(index)後{到目前爲止，我所有的代碼都放在了一起。我想知道是否有人能夠注意到爲什麼這不是構建出來的，爲什麼我得到這個錯誤，因爲我已經計算了括號和大括號？

Demo of the slider build

來源

2015-05-09 PhpDude

聽起來像是你想要的：'$ .each（$ slides，function（index）{...}）;'逗號，而不是點。僅供參考，您可以改爲使用：'$ slides.each（function（index）{...}）;'這是通過jq匹配集迭代的推薦方式（保持鏈接） –

Crikey這樣的菜鳥錯誤 - 奇怪的事情甚至是修復幻燈片不顯示導航按鈕，甚至滑動？我顯然在這裏錯過了什麼？ – PhpDude

你發佈的jsFiddle有很多錯誤。 'advance（）'方法在每個循環函數範圍內定義，您沒有包含jQuery，也許更多...因此，一旦遇到其他問題，請提出新問題，不要指望其他人修復您的完整代碼 –

很好的開始您將JQuery的是這樣的：

$('.slider').each(function(){

但沒有在您發佈有

class='slider'

的加價單個元素

因此，所討論的JQuery與您標記中的單個元素不匹配，因此代碼不會運行，您也不會得到任何按鈕。

而且你的代碼（按下按鈕）使用

buttonArray.push($button);

到按鈕配置，但在沒有指向它TBE按鈕的內容添加到DOM所以他們不會，即使你的代碼顯示出來跑了。

你缺少的變量聲明

var $this   = $(this),

即使你使用它，您無需引用JQuery的前面的變種。

@A。沃爾夫對''也是正確的。而不是逗號，並且您放在一起的標記中還存在其他一些錯誤

純粹以您所擁有的甚至沒有嘗試修復代碼中的任何錯誤，只是語法問題，然後執行以下步驟周圍的圖像和做一些事情。（你可以自己排序代碼中的邏輯錯誤）

<html> 
    <head> 
    <style> 
     .slider { position: relative; overflow: hidden; height: 300px;} 
     .slide-group{ width:100%; height: 100%; position: relative;} 
     .slide{ width: 100%; height: 100%; display: none; position: absolute;} 
     .slide:first-child{ display: block;}  
    </style> 
    </head> 
    <body> 
    <div class="slider"> 
     <div class="slide-group"> 
     <div class="slide slide-1"><img src="http://thumbs.dreamstime.com/t/demo-sign-d-letter-blocks-forming-isolated-white-background-36021240.jpg" /></div> 
     <div class="slide slide-2"><img src="http://thumbs.dreamstime.com/t/demo-sign-d-letter-blocks-forming-isolated-white-background-36021240.jpg" /><div class="slide slide-2"> 
     <div class="slide slide-3"><img src="http://thumbs.dreamstime.com/t/demo-sign-d-letter-blocks-forming-isolated-white-background-36021240.jpg" /><div class="slide slide-3"> 
     <div class="slide slide-4"><img src="http://thumbs.dreamstime.com/t/demo-sign-d-letter-blocks-forming-isolated-white-background-36021240.jpg" /><div class="slide slide-4"> 
     </div> 
    </div> 
    <div class="slide-buttons"></div> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
    <script> 
     $(document).ready(function() { 
     $('.slider').each(function(){ 
      var $this = $(this), 
       $group = $this.find('.slide-group'), 
       $slides = $this.find('.slide'), 
       buttonArray = [], 
       currentIndex = 0, 
       timeout; 

      function move(newIndex) { 
      var animateLeft, slideLeft; 
      advance(); 
      if ($group.is(':animated') || currentIndex === newIndex) { 
       return; 
      } 
      buttonArray[currentIndex].removeClass('active'); 
      buttonArray[newIndex].addClass('active'); 

      if (newIndex > currentIndex) { 
       slideLeft = '100%'; 
       animateLeft = '-100%'; 
      } else { 
       slideLeft = '-100%'; 
       animateLeft = '100%'; 
      } 
      $slides.eq(newIndex).css({left: slideLeft, display: 'block'}); 
      $group.animate({left:animateLeft} , function() { 
       $slides.eq(currentIndex).css({display: 'none'}); 
       $slides.css({left:0}); 
       currentIndex = newIndex; 
      }); 
      } 
      function advance() { 
      clearTimeout(timeout); 
      timeout = setTimeout(function(){ 
       if (currentIndex < ($slides.length - 1)) { 
       move (currentIndex + 1); 
       } else { 
       move(0); 
       } 
      }, 4000); 
      } 
      $.each($slides, function(index) { 
      // Create a button element for the button 
      var $button = $('<button type="button" class="slide-btn">&bull;</button>'); 
      if (index === currentIndex) { 
       $button.addClass('active'); 
      } 
      $button.on('click', function(){ 
       move(index); 
      }).appendTo('.slide-buttons'); 

      buttonArray.push($button); 
      }); 
      advance(); 
     }); 
     }); 
    </script> 
    </body> 
</html>

來源

2015-05-09 16:21:13

JS滑塊演示失敗，沒有明顯的錯誤？

回答

相關問題