なぜjquery addClassとremoveClassはアラート機能でのみ正常に動作しますか？

Question

jqueryで自分のスライダーを作ろうとしています。続いては、実施例である：私は、コンテナの右側にnext画像を配置し、中心部に到達するためにスムーズに移動するためのコードを設計し

$(document).ready(function(){ 
 

 

 
\t \t $(".carousel-indicators li").click(function(){ 
 
\t \t \t $(".carousel-indicators li").css("background-color", "transparent"); 
 
\t \t \t $(this).css("background-color", "yellow"); 
 
\t \t }); 
 

 

 
\t \t var active1, prev1, next1; 
 
\t \t 
 
\t \t function rotateimages(){ 
 
\t \t \t active1 = $(".item.active"); 
 

 
\t \t \t if(active1.prev().length == 0) { 
 
\t \t \t \t prev1 = $(".item").last(); 
 
\t \t \t \t prev1.removeClass("mytrans"); 
 
\t \t \t \t prev1.addClass("prev"); \t \t \t \t 
 
\t \t \t } 
 
\t \t \t else { 
 
\t \t \t \t prev1 = active1.prev(); 
 
\t \t \t \t prev1.removeClass("mytrans"); 
 
\t \t \t \t prev1.addClass("prev"); \t \t \t \t 
 
\t \t \t } 
 

 
\t \t \t if(active1.next().length == 0) { 
 
\t \t \t \t next1 = $(".item").first(); 
 
\t \t \t \t next1.removeClass("mytrans"); 
 
\t \t \t \t next1.addClass("next"); \t \t 
 
\t \t \t \t //alert(); \t \t \t \t \t \t 
 
\t \t \t } 
 
\t \t \t else { 
 
\t \t \t \t next1 = active1.next(); 
 
\t \t \t \t next1.removeClass("mytrans"); 
 
\t \t \t \t next1.addClass("next"); \t 
 
\t \t \t \t //alert(); 
 
\t \t \t } 
 
\t \t \t 
 

 
\t \t \t active1.removeClass("active").addClass("prev mytrans"); 
 
\t \t \t next1.removeClass("next").addClass("mytrans active"); \t \t \t 
 
\t \t \t prev1.removeClass("prev mytrans"); 
 

 
\t \t } 
 

 
\t \t setInterval(rotateimages, 3000); 
 

 
\t });

.carousel-inner > .item > img, 
 
    .carousel-inner > .item > a > img { 
 
     width: 70%; 
 
     margin: auto; 
 
    } 
 
    html, body { 
 
    \t width: 100%; 
 
    \t height: 100%; 
 
    } 
 
\t * { 
 
\t \t margin: 0; 
 
\t \t padding: 0; 
 
\t \t box-sizing: border-box; 
 
\t \t list-style-type: none; 
 
\t } 
 
\t .container { 
 
\t \t width: 768px; 
 
\t \t margin: auto; 
 
\t \t padding: 0 15px; 
 
\t \t height: 100%; 
 
\t } 
 
\t #myCarousel { 
 
\t \t width: 100%; 
 
\t \t background-color: lightgray; 
 
\t \t position: relative; 
 
\t \t height: 100%; 
 
\t } 
 
\t .carousel-indicators { 
 
\t \t position: absolute; 
 
\t \t bottom: 20px; 
 
\t \t left: 45%; 
 
\t } 
 
\t .carousel-indicators li { 
 
\t \t list-style-type: circle; 
 
\t \t display: inline-block; 
 
\t \t width: 10px; 
 
\t \t height: 10px; 
 
\t \t border: 1px solid red; 
 
\t \t border-radius: 10px; 
 
\t \t cursor: pointer; 
 
\t } 
 

 
\t .mytrans { 
 
\t \t transition: all 1s; 
 
\t } 
 
\t .carousel-inner .item { 
 
\t \t position: absolute; 
 
\t \t display: none; 
 
\t } 
 
\t .carousel-inner .item.prev { 
 
\t \t left: -100%; 
 
\t \t top: 0; 
 
\t \t display: block; 
 
\t } 
 
\t .carousel-inner .item.next { 
 
\t \t left: 100%; 
 
\t \t top: 0; 
 
\t \t display: block; 
 
\t } 
 
\t .carousel-inner .item.active { 
 
\t \t left: 0%; 
 
\t \t top: 0; 
 
\t \t display: block; 
 
\t } 
 
\t .carousel-inner .left { 
 
\t \t position: absolute; 
 
\t \t left: 10%; 
 
\t \t top: 50%; 
 
\t } 
 
\t .carousel-inner .right { 
 
\t \t position: absolute; 
 
\t \t right: 10%; 
 
\t \t top: 50%; 
 
\t }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    
 
    <div id="myCarousel" class="carousel slide" data-ride="carousel"> 
 
    <!-- Indicators --> 
 
    <ol class="carousel-indicators"> 
 
     <li data-target="#myCarousel" data-slide-to="0" class="active"></li> 
 
     <li data-target="#myCarousel" data-slide-to="1"></li> 
 
     <li data-target="#myCarousel" data-slide-to="2"></li> 
 
     <li data-target="#myCarousel" data-slide-to="3"></li> 
 
    </ol> 
 

 
    <!-- Wrapper for slides --> 
 
    <div class="carousel-inner" role="listbox"> 
 

 
     <div class="item active"> 
 
     <img src="http://madaboutwords.com/wp-content/uploads/2010/05/one.png" alt="Chania" width="460" height="345"> 
 
     <div class="carousel-caption"> 
 
      <h3>Chania</h3> 
 
      <p>The atmosphere in Chania has a touch of Florence and Venice.</p> 
 
     </div> 
 
     </div> 
 

 
     
 
    
 
     <div class="item"> 
 
     <img src="http://digimind.com/blog/wp-content/uploads/2012/02/number2c.png" alt="Flower" width="460" height="345"> 
 
     <div class="carousel-caption"> 
 
      <h3>Flowers</h3> 
 
      <p>Beatiful flowers in Kolymbari, Crete.</p> 
 
     </div> 
 
     </div> 
 

 
     <div class="item"> 
 
     <img src="http://www.hotel-r.net/im/hotel/gb/number-three-22.png" alt="Flower" width="460" height="345"> 
 
     <div class="carousel-caption"> 
 
      <h3>Flowers</h3> 
 
      <p>Beatiful flowers in Kolymbari, Crete.</p> 
 
     </div> 
 
     </div> 
 

 
     <div class="item"> 
 
     <img src="http://www.hotel-r.net/im/hotel/gb/number-four-10.gif" alt="Flower" width="460" height="345"> 
 
     <div class="carousel-caption"> 
 
      <h3>Flowers</h3> 
 
      <p>Beatiful flowers in Kolymbari, Crete.</p> 
 
     </div> 
 
     </div> 
 
    
 
    </div> 
 

 
    <!-- Left and right controls --> 
 
    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> 
 
     <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 
 
     <span class="sr-only">Previous</span> 
 
    </a> 
 
    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"> 
 
     <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
 
     <span class="sr-only">Next</span> 
 
    </a> 
 
    </div> 
 
</div>

。しかしnext画像は決してleft: 100%に届きません。しかし、jqueryのaddClassメソッドの後にalert()を追加すると、nextイメージがコンテナの右側に届きます。

$(document).ready(function() { 
 

 

 
    $(".carousel-indicators li").click(function() { 
 
    $(".carousel-indicators li").css("background-color", "transparent"); 
 
    $(this).css("background-color", "yellow"); 
 
    }); 
 

 

 
    var active1, prev1, next1; 
 

 
    function rotateimages() { 
 
    active1 = $(".item.active"); 
 

 
    if (active1.prev().length == 0) { 
 
     prev1 = $(".item").last(); 
 
     prev1.removeClass("mytrans"); 
 
     prev1.addClass("prev"); 
 
    } else { 
 
     prev1 = active1.prev(); 
 
     prev1.removeClass("mytrans"); 
 
     prev1.addClass("prev"); 
 
    } 
 

 
    if (active1.next().length == 0) { 
 
     next1 = $(".item").first(); 
 
     next1.removeClass("mytrans"); 
 
     next1.addClass("next"); 
 
     alert(); 
 
    } else { 
 
     next1 = active1.next(); 
 
     next1.removeClass("mytrans"); 
 
     next1.addClass("next"); 
 
     alert(); 
 
    } 
 

 

 
    active1.removeClass("active").addClass("prev mytrans"); 
 

 

 
    next1.removeClass("next").addClass("mytransactive"); 
 

 

 
    prev1.removeClass("prev mytrans"); 
 

 
    } 
 

 
    setInterval(rotateimages, 3000); 
 
});

.carousel-inner > .item > img, 
 
.carousel-inner > .item > a > img { 
 
    width: 70%; 
 
    margin: auto; 
 
} 
 
html, 
 
body { 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
* { 
 
    margin: 0; 
 
    padding: 0; 
 
    box-sizing: border-box; 
 
    list-style-type: none; 
 
} 
 
.container { 
 
    width: 768px; 
 
    margin: auto; 
 
    padding: 0 15px; 
 
    height: 100%; 
 
} 
 
#myCarousel { 
 
    width: 100%; 
 
    background-color: lightgray; 
 
    position: relative; 
 
    height: 100%; 
 
} 
 
.carousel-indicators { 
 
    position: absolute; 
 
    bottom: 20px; 
 
    left: 45%; 
 
} 
 
.carousel-indicators li { 
 
    list-style-type: circle; 
 
    display: inline-block; 
 
    width: 10px; 
 
    height: 10px; 
 
    border: 1px solid red; 
 
    border-radius: 10px; 
 
    cursor: pointer; 
 
} 
 
.mytrans { 
 
    transition: all 1s; 
 
} 
 
.carousel-inner .item { 
 
    position: absolute; 
 
    display: none; 
 
} 
 
.carousel-inner .item.prev { 
 
    left: -100%; 
 
    top: 0; 
 
    display: block; 
 
} 
 
.carousel-inner .item.next { 
 
    left: 100%; 
 
    top: 0; 
 
    display: block; 
 
} 
 
.carousel-inner .item.active { 
 
    left: 0%; 
 
    top: 0; 
 
    display: block; 
 
} 
 
.carousel-inner .left { 
 
    position: absolute; 
 
    left: 10%; 
 
    top: 50%; 
 
} 
 
.carousel-inner .right { 
 
    position: absolute; 
 
    right: 10%; 
 
    top: 50%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 

 
    <div id="myCarousel" class="carousel slide" data-ride="carousel"> 
 
    <!-- Indicators --> 
 
    <ol class="carousel-indicators"> 
 
     <li data-target="#myCarousel" data-slide-to="0" class="active"></li> 
 
     <li data-target="#myCarousel" data-slide-to="1"></li> 
 
     <li data-target="#myCarousel" data-slide-to="2"></li> 
 
     <li data-target="#myCarousel" data-slide-to="3"></li> 
 
    </ol> 
 

 
    <!-- Wrapper for slides --> 
 
    <div class="carousel-inner" role="listbox"> 
 

 
     <div class="item active"> 
 
     <img src="http://madaboutwords.com/wp-content/uploads/2010/05/one.png" alt="Chania" width="460" height="345"> 
 
     <div class="carousel-caption"> 
 
      <h3>Chania</h3> 
 
      <p>The atmosphere in Chania has a touch of Florence and Venice.</p> 
 
     </div> 
 
     </div> 
 

 

 

 
     <div class="item"> 
 
     <img src="http://digimind.com/blog/wp-content/uploads/2012/02/number2c.png" alt="Flower" width="460" height="345"> 
 
     <div class="carousel-caption"> 
 
      <h3>Flowers</h3> 
 
      <p>Beatiful flowers in Kolymbari, Crete.</p> 
 
     </div> 
 
     </div> 
 

 
     <div class="item"> 
 
     <img src="http://www.hotel-r.net/im/hotel/gb/number-three-22.png" alt="Flower" width="460" height="345"> 
 
     <div class="carousel-caption"> 
 
      <h3>Flowers</h3> 
 
      <p>Beatiful flowers in Kolymbari, Crete.</p> 
 
     </div> 
 
     </div> 
 

 
     <div class="item"> 
 
     <img src="http://www.hotel-r.net/im/hotel/gb/number-four-10.gif" alt="Flower" width="460" height="345"> 
 
     <div class="carousel-caption"> 
 
      <h3>Flowers</h3> 
 
      <p>Beatiful flowers in Kolymbari, Crete.</p> 
 
     </div> 
 
     </div> 
 

 
    </div> 
 

 
    <!-- Left and right controls --> 
 
    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> 
 
     <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 
 
     <span class="sr-only">Previous</span> 
 
    </a> 
 
    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"> 
 
     <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
 
     <span class="sr-only">Next</span> 
 
    </a> 
 
    </div> 
 
</div>

問題はクラスnextが追加され、あまりにも速く削除されていることのようだ：以下のコードです。したがって、nextのスタイルが追加される前に、クラスnextが削除されている可能性があります。コードスニペットは、次のとおりです。

else { 
    next1 = active1.next(); 
    next1.removeClass("mytrans"); 
    next1.addClass("next"); 
    //alert(); 
} 


active1.removeClass("active").addClass("prev mytrans"); 
next1.removeClass("next").addClass("mytrans active");   
prev1.removeClass("prev mytrans"); 

質問：nextクラスはremoveClass機能によって除去される前に、私はnextクラスのスタイルを適用するにはどうすればよい？

Answer 1

私はこのようなremoveClass/addClass関数を使用しないことをお勧めします。

active1.toggleClass('active'); 
active1.toggleClass('prev mytrans'); 
next1.toggleClass('next'); 
next1.toggleClass('mytrans active'); 

あなたは保守が容易であると同じくらいのコードを乱雑にしない、などのような関数を作成することができ、この方法を使用する：

は

jQueryの中で最もエレガントな方法は、このようなようにそれらを切り替えることです削除/追加区切り：

function toggleNext(){ 
    active1.toggleClass('active'); 
    active1.toggleClass('prev mytrans'); 
    next1.toggleClass('next'); 
    next1.toggleClass('mytrans active'); 
} 

また、クラスを追加/削除の欠点の一つは、jQueryのクラスは削除する/追加し、あなたのコードが動作してつかむだろう見つける見つけることができないときということです。

http://api.jquery.com/toggleclass/

Answer 2

<html> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
    <script type="text/javascript" > 
     $(document).ready(function() { 


      $(".carousel-indicators li").click(function() { 
       $(".carousel-indicators li").css("background-color", "transparent"); 
       $(this).css("background-color", "yellow"); 
      }); 


      var active1, prev1, next1; 

      function rotateimages() { 
       active1 = $(".item.active"); 

       if (active1.prev().length == 0) { 
        prev1 = $(".item").last(); 
        prev1.removeClass("mytrans ").addClass(" prev"); 
       } else { 
        prev1 = active1.prev(); 
        prev1.removeClass("mytrans ").addClass(" prev"); 
       } 

       if (active1.next().length == 0) { 
        next1 = $(".item").first(); 
        next1.removeClass("mytrans ").addClass(" next"); 
        //alert();      
       } else { 
        next1 = active1.next(); 
        next1.removeClass("mytrans ").addClass(" next"); 
        //alert(); 
       } 


       active1.removeClass("active").addClass("prev mytrans"); 


       next1.removeClass("next").addClass("mytrans active"); 


       prev1.removeClass("prev mytrans"); 

      } 

      setInterval(rotateimages, 3000); 
     }); 


    </script> 
    <style> 

     .carousel-inner > .item > img, 
     .carousel-inner > .item > a > img { 
      width: 70%; 
      margin: auto; 
     } 
     html, body { 
      width: 100%; 
      height: 100%; 
     } 
     * { 
      margin: 0; 
      padding: 0; 
      box-sizing: border-box; 
      list-style-type: none; 
     } 
     .container { 
      width: 768px; 
      margin: auto; 
      padding: 0 15px; 
      height: 100%; 
     } 
     #myCarousel { 
      width: 100%; 
      background-color: lightgray; 
      position: relative; 
      height: 100%; 
     } 
     .carousel-indicators { 
      position: absolute; 
      bottom: 20px; 
      left: 45%; 
     } 
     .carousel-indicators li { 
      list-style-type: circle; 
      display: inline-block; 
      width: 10px; 
      height: 10px; 
      border: 1px solid red; 
      border-radius: 10px; 
      cursor: pointer; 
     } 

     .mytrans { 
      transition: all 1s; 
     } 
     .carousel-inner .item { 
      position: absolute; 
      display: none; 
     } 
     .carousel-inner .item.prev { 
      left: -100%; 
      top: 0; 
      display: block; 
     } 
     .carousel-inner .item.next { 
      left: 100%; 
      top: 0; 
      display: block; 
     } 
     .carousel-inner .item.active { 
      left: 0%; 
      top: 0; 
      display: block; 
     } 
     .carousel-inner .left { 
      position: absolute; 
      left: 10%; 
      top: 50%; 
     } 
     .carousel-inner .right { 
      position: absolute; 
      right: 10%; 
      top: 50%; 
     } 


    </style> 
    <div class="container"> 

     <div id="myCarousel" class="carousel slide" data-ride="carousel"> 
      <!-- Indicators --> 
      <ol class="carousel-indicators"> 
       <li data-target="#myCarousel" data-slide-to="0" class="active"></li> 
       <li data-target="#myCarousel" data-slide-to="1"></li> 
       <li data-target="#myCarousel" data-slide-to="2"></li> 
       <li data-target="#myCarousel" data-slide-to="3"></li> 
      </ol> 

      <!-- Wrapper for slides --> 
      <div class="carousel-inner" role="listbox"> 

       <div class="item active"> 
        <img src="http://madaboutwords.com/wp-content/uploads/2010/05/one.png" alt="Chania" width="460" height="345"> 
        <div class="carousel-caption"> 
         <h3>Chania</h3> 
         <p>The atmosphere in Chania has a touch of Florence and Venice.</p> 
        </div> 
       </div> 



       <div class="item"> 
        <img src="http://digimind.com/blog/wp-content/uploads/2012/02/number2c.png" alt="Flower" width="460" height="345"> 
        <div class="carousel-caption"> 
         <h3>Flowers</h3> 
         <p>Beatiful flowers in Kolymbari, Crete.</p> 
        </div> 
       </div> 

       <div class="item"> 
        <img src="http://www.hotel-r.net/im/hotel/gb/number-three-22.png" alt="Flower" width="460" height="345"> 
        <div class="carousel-caption"> 
         <h3>Flowers</h3> 
         <p>Beatiful flowers in Kolymbari, Crete.</p> 
        </div> 
       </div> 

       <div class="item"> 
        <img src="http://www.hotel-r.net/im/hotel/gb/number-four-10.gif" alt="Flower" width="460" height="345"> 
        <div class="carousel-caption"> 
         <h3>Flowers</h3> 
         <p>Beatiful flowers in Kolymbari, Crete.</p> 
        </div> 
       </div> 

      </div> 

      <!-- Left and right controls --> 
      <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> 
       <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 
       <span class="sr-only">Previous</span> 
      </a> 
      <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"> 
       <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
       <span class="sr-only">Next</span> 
      </a> 
     </div> 
    </div> 
</html> 

このコードを試してみてください。テスト済み