jqueryのスライドショーはDOMを反復しません

Question

DOMを反復処理しないという点を除いて、このJqueryのスライドショースニペットが私にはうってつけです。現在、ドキュメントの最初のスライドショーのみが機能します。私はすべてを調べてきました。ドキュメント内に#slideframe DIVのすべてを見つけるために.each（）を使う必要があると私は確信しています。残念ながら、私はそれを適切に使用することはできません。私のポートフォリオを稼働させる上での助けとなることは大きな助けになります！

あなたはここで "作業" サイトを参照することができます：ここで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> 

1月4日 MAC化粧品AW17ファッションウィークブランディングあなたが複数回IDを使用することができない

Answer 1

まず、DOM要素ごとに1つのIDのみを使用してください。だから、あなたが複数のslideframe要素を参照したい場合は、次の例に示すように、クラス識別子を使用して検討してください。

<div class="slideframe">

（あなたも彼らのように#currentと#total要素を更新したいと思う注意IDは、どちらかの複製されません）

すると、次のようにあなたがこれらのslideframesを参照しますjQueryの中で：。

$('.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(); 
     } 

    }); 
}); 

Answer 2

（culturesport.tvによってイラスト）。あなたは現在、複数の場所にid = "slideframe"を持っています。 jQueryは、最初のインスタンスのみを表示できます。スライドフレームをクラスに変更してみてください。