クリックしてdivを回転する

Question

誰かが助けてくれることを願っています。私は数日間このことに苦労しています。私はjQueryを使ってクリック時にdivを回転させています。 1ページに2つの機能が必要になるまで機能しました。だから、2つのグループのdivが1ページに2つの場所で回転するようになり、クリックする場所に関係なく両方のグループが回転しています。たとえば、矢印を使用してdivコンテンツを回転しています.2番目の矢印セットを使用すると、divコンテンツの両方のセットが同時に回転しています。私はこれらの2つが独立していることを望んでいます - 他のグループのないdivの1つのグループを回転できるようにする。

$(document).ready(function(){ 
 
     $("#cslide-slides").cslide(); 
 
    });

/*=Slides 
 
    ----------------------------------------------- */ 
 
    .cslide-slides-master { 
 
     overflow: hidden; 
 
    } 
 
    
 
    .cslide-slides-master:last-child { 
 
     margin-bottom: 0; } 
 
    
 
    .cslide-slides-container { 
 
     visibility: hidden; } 
 
    
 
    .cslide-slide { 
 
     float: left; 
 
    } 
 
    /* prev next buttons */ 
 
    .cslide-prev-next { 
 
     display: none; 
 
     -webkit-touch-callout: none; 
 
     -webkit-user-select: none; 
 
     -khtml-user-select: none; 
 
     -moz-user-select: none; 
 
     -ms-user-select: none; 
 
     user-select: none; } 
 
    
 
    .cslide-prev, .cslide-next { 
 
     display: inline-block; 
 
     float: right; 
 
    
 
     padding: 10px 5px; 
 
    
 
     cursor: pointer; } 
 
    
 
    .cslide-prev.cslide-disabled:hover, 
 
    .cslide-next.cslide-disabled:hover { 
 
    } 
 
    
 
    .cslide-disabled { 
 
     opacity: 0.3; }

<div id="Cell"> 
 
    <section id="cslide-slides" class="cslide-slides-master clearfix"> 
 
    
 
       <div class="cslide-slides-container clearfix"> 
 
        <div class="cslide-slide">h4>Insert update headline here</h4> 
 
         <p>Some text that describes this update</p> 
 
    
 
        </div> 
 
        <div class="cslide-slide">h4>Update 2</h4> 
 
         <p>Some text that describes this update</p> 
 
        </div> 
 
        <div class="cslide-slide"><h4>Update 3</h4><p>Some text that describes this update</p> 
 
        </div> 
 
        <div class="cslide-slide">h4>Update 4</h4><p>Some text that describes this update</p> 
 
        </div> 
 
        <div class="cslide-slide"><h4>Update 5</h4><p>Some text that describes this update</p> 
 
        </div> 
 
    
 
       </div> 
 
       <div class="cslide-prev-next clearfix"><span class="cslide-next"><img src="images/Arrows_navigation_right.png" alt="Right" width="20" height="20"></span> 
 
        <span class="cslide-prev"><img src="images/Arrows_navigation_left.png" alt="Left" width="20" height="20"></span> 
 
    
 
       </div> 
 
      </section><!-- /sliding content section --> 
 
    
 
    
 
     </div> 
 
     <p>&nbsp;</p> 
 
     
 
     <div id="Cell"> 
 
    
 
    <p class="line">&nbsp;</p> 
 
    
 
    <section id="cslide-slides" class="cslide-slides-master clearfix"> 
 
    
 
       <div class="cslide-slides-container clearfix"> 
 
        <div class="cslide-slide"><h4>Insert update headline here</h4> 
 
         <p>Some text that describes this update</p> 
 
    
 
        </div> 
 
        <div class="cslide-slide"><h4>Update 2</h4> 
 
         <p>Some text that describes this update</p><a href="PolicyUpdates.html#PolicyUpdate2">Read more</a> 
 
        </div> 
 
        <div class="cslide-slide"><h4>Update 3</h4><p>Some text that describes this update</p> 
 
        </div> 
 
        <div class="cslide-slide"><h4>Update 4</h4><p>Some text that describes this update</p> 
 
        </div> 
 
        <div class="cslide-slide"><h4>Update 5</h4><p>Some text that describes this update</p> 
 
        </div> 
 
    
 
       </div> 
 
       <div class="cslide-prev-next clearfix"><span class="cslide-next"><img src="images/Arrows_navigation_right.png" alt="Right" width="20" height="20"></span> 
 
        <span class="cslide-prev"><img src="images/Arrows_navigation_left.png" alt="Left" width="20" height="20"></span> 
 
    
 
       </div> 
 
      </section><!-- /sliding content section --> 
 
    </div> 
 

 

 

 

 

 

 
    <script type="text/javascript" src="jquery.cslide.js">

Answer 1

あなたは、各スライダのためcslideの別々のインスタンスを初期化する必要があります。また、IDは一意であり、同じページで再利用されないようにする必要があります。それが授業のためのものです。

各スライダに一意のIDを作成し、プラグインが許可する場合はそのクラスで初期化します。それ以外の場合は、一意のIDを使用します。

FWIW新しいスライダを使用すると、使用しているスライダが4年間で更新されていません。