jquery幻燈片將不會遍歷dom

我發現這個jquery幻燈片片段，這對我很好，除了它不會遍歷DOM。現在只有我的文檔中的第一個幻燈片將工作。我已經搜遍遍了，我很確定我需要使用.each（），以便它能夠在我的文檔中找到所有#slideframe DIV。不幸的是，我似乎無法正確使用它。任何幫助讓我的投資組合投入運行將是一個很大的幫助！jquery幻燈片將不會遍歷dom

，你可以看到「工作」的網站在這裏：LINK

這裏是我的JQUERY

<script language="javascript"> $(document).ready(function() { 
    var count = $('#slideframe').children().length; 
    $("#total").text(count); 
    // set display:none for all members of ".pic" class except the first 
    var hidden = $('#slideframe').children(); 
    $('hidden:gt(0)').hide(); 

    // stores all matches for class="pic" 
    var $slides = $('#slideframe').children(); 

    $slides.click(function() { 

     // stores the currently-visible slide 
     var $current = $(this); 
     if ($current.is($slides.last())) { 
      $("#current").text("1"); 
      $current.hide(); 
      $slides.first().show(); 
     } 
     // else, hide current slide and show the next one 
     else { 
      $("#current").text($current.next().index()+1); 
      $current.hide().next().show(); 
     } 

    }); 
});</script>

這裏是我的HTML：

<div class="projectcontainer"> 
<div id="slideframe"> 
      <video class="image" src="NEW/PHOTOS/AW17_FW_INSTA_LOCKUP_LO.mp4" type="video/mp4" autoplay loop></video> 
      <img class="image" src="NEW/PHOTOS/AW17_LONDON_SQUARE.jpg" style="display: none;"> 
      <img class="image" src="NEW/PHOTOS/AW17_MILAN_SQUARE.jpg" style="display: none;"> 
      <img class="image" src="NEW/PHOTOS/AW17_NEWYORK_SQUARE.jpg" style="display: none;"> 
</div> 


     <div class="imagetext"> 
      <div class="counter"><span id="current">1</span>/<span id="total">4</span></div> 
      MAC Cosmetics AW17 Fashion Week Branding<br> 
      (Illustrations by <a href="culturesport.tv">culturesport.tv</a>) 
     </div>

四分之一 MAC化妝品AW17時裝週品牌
（由culturesport.tv插圖）

來源

2017-03-28 TagoMago

首先，您應該只爲每個DOM元素使用一個ID。所以，如果你想引用多個slideframe元素，可以考慮使用一個類標識符，如下面的例子：

<div class="slideframe">

（請注意，您也想更新#current和#total元素，以便他們ID不重複的兩種）

然後，在jQuery的如下，你會引用這些slideframes：

$('.slideframe')

另外，對於您的觀點：您希望遍歷這兩個幻燈片，以便例如調用.last()將相對於正確的幻燈片。

var $frames = $('.slideframe'); 
$frames.each(function() { 
    var currentFrame = $(this); 
    var currentSlides = currentFrame.children(); 
    currentSlides.click(function() { 

     // stores the currently-visible slide 
     var $current = $(this); 
     if ($current.is(currentSlides.last())) { 
      $(".current", currentFrame.next()).text("1"); // note this assumes you have set DOM element to use class="current" 
      $current.hide(); 
      currentSlides.first().show(); 
     } 
     // else, hide current slide and show the next one 
     else { 
      $(".current", currentFrame.next()).text($current.next().index()+1); // note this assumes you have set DOM element to use class="current" 
      $current.hide().next().show(); 
     } 

    }); 
});

來源

2017-03-28 01:39:50 nb1987

啊！非常感謝！！！這回答了我的問題。冒着聽不到感恩的風險，你是否介意告訴我如何添加每個櫃檯？謝謝謝謝謝謝！ – TagoMago

非常歡迎您！我不相信你需要爲計數器添加'.each（）';然而，請注意，我更新了代碼，以便對計數器的引用應檢索正確的DOM元素：'$（「。current」，currentFrame.next（））'。（此更新的參考文獻出現在代碼中的兩個地方。） – nb1987

再次感謝您！我非常感謝你的幫助！ – TagoMago

不能使用一個id多於一次。您目前在多個位置擁有id =「幻燈片」。 jQuery只能看到第一個實例。嘗試將幻燈片更改爲一個類。

來源

2017-03-28 01:27:46 Squeakasaur

啊，你說得對。儘管如果我將其更改爲類「$（」。slideframe「）。children（）」可以抓取頁面上的每個.image元素，而不是使用.slideframe區分直接子元素。 – TagoMago

jquery幻燈片將不會遍歷dom

回答

相關問題