ブートストラップ項目がアクティブな場合divに追加してから削除する

私はブートストラップカルーセルを使用していますが、testingから.link-txtにクラスを追加しました。 itemは.activeです。しかし、.link-txtからクラスを削除したい場合は、.activeが削除されます。 item。私はクラスを削除することはできていないようです。ここhasClassブートストラップ項目がアクティブな場合divに追加してから削除する

これまでのところ、私のjQueryのある場合：

$('#home-carousel').on('slid.bs.carousel', function() { 
    if ($('.item').hasClass('active')) { 
    $('.active .link-txt').addClass('testing'); 
    } else { 
    $('.link-txt').removeClass('testing'); 
    } 
});

HTML：クラスを削除することができないと並んで

<?php 
if(have_rows('carousel')):?> 
<div id="home-carousel" class="carousel bs-slider fade control-round indicators-line" data-ride="carousel" data-interval="6000"> 
    <div class="carousel-inner" role="listbox"> 
    <?php 
    $i=0; 
    while (have_rows('carousel')) : the_row();?> 
     <div class="item <?php if($i === 0) { ?> active <?php } ?>" style="background-image:url(<?php the_sub_field('image'); ?>);"> 
      <div class="carousel-caption"> 
       <div class="col-md-6 "> 
        <h1><a href="<?php the_sub_field('link');?>"><?php the_sub_field('heading');?></a></h1>   
        <a href="<?php the_sub_field('link');?>" class="link-txt">View</a> 
       </div> 
      </div> 
     </div> 
    <?php 
    ++$i; 
    endwhile; ?> 
    </div> 
</div> 
<?php endif;?>

testing .... .activeの最初のスライドがHTMLに追加されましたが、これはjQueryで検出されないようです。クラスが2番目のスライドまで追加されないことを意味します。最初のスライドで.activeを検出し、.link-txtにテストを追加する方法はありますか？

Here is Fiddle問題を示しています。

出典

2017-09-20 probablybest

addClass（ 'テスト '）、 '$（' リンク-txtを。'）で、あなたは特定のものを選択しなかったので、'あなたはすべての要素.link-テキストにクラスを追加します。 – Doomenik

function linkClass() { 
    $('.item .link-txt').removeClass('testing') //Remove every class no check necessary 
    $('.item.active .link-txt').addClass('testing'); //Add the class to the active one 
} 

//Document ready so it works also on startup 
$(document).ready(function() { 
    linkClass(); 
}); 

$('#home-carousel').on('slid.bs.carousel', function() {linkClass()});

すでに最初のスライドで動作しますが、問題は作成時にスライドしないということだけです。そこで私はドキュメント準備機能を追加したので、起動時にも機能します。

EDIT：この例で私がhttps://www.w3schools.com/bootstrap/bootstrap_ref_js_carousel.asp からコピーしてきた私は、私のコードを追加して、デベロッパーコンソールでそれを開いた場合、あなたはそれが正確に何をしたいんでしょう。

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <title>Bootstrap Example</title> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
    <style> 
 
    .carousel-inner > .item > img, 
 
    .carousel-inner > .item > a > img { 
 
     width: 70%; 
 
     margin: auto; 
 
    } 
 
    </style> 
 
</head> 
 
<body> 
 

 
<div class="container"> 
 
    <h2>Carousel Events - slid.bs.carousel</h2> 
 
    <p>The <strong>slid.bs.modal</strong> event occurs when the carousel has finished sliding from one item to another.</p> 
 
    <div id="myCarousel" class="carousel slide"> 
 
    <!-- Indicators --> 
 
    <ol class="carousel-indicators"> 
 
     <li class="item1 active"></li> 
 
     <li class="item2"></li> 
 
     <li class="item3"></li> 
 
     <li class="item4"></li> 
 
    </ol> 
 

 
    <!-- Wrapper for slides --> 
 
    <div class="carousel-inner" role="listbox"> 
 
     <div class="item active"> 
 
     <img src="http://via.placeholder.com/350x150" alt="Chania" width="460" height="345"> 
 
     </div> 
 

 
     <div class="item"> 
 
     <img src="http://via.placeholder.com/360x150" alt="Chania" width="460" height="345"> 
 
     </div> 
 
    
 
     <div class="item"> 
 
     <img src="http://via.placeholder.com/370x150" alt="Flower" width="460" height="345"> 
 
     </div> 
 

 
     <div class="item"> 
 
     <img src="http://via.placeholder.com/380x150" alt="Flower" width="460" height="345"> 
 
     </div> 
 
    </div> 
 

 
    <!-- Left and right controls --> 
 
    <a class="left carousel-control" href="#myCarousel" role="button"> 
 
     <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"> 
 
     <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
 
     <span class="sr-only">Next</span> 
 
    </a> 
 
    </div> 
 
</div> 
 

 
<script> 
 
$(document).ready(function(){ 
 
    // Activate Carousel 
 
    $("#myCarousel").carousel(); 
 
    
 
    // Enable Carousel Indicators 
 
    $(".item1").click(function(){ 
 
     $("#myCarousel").carousel(0); 
 
    }); 
 
    $(".item2").click(function(){ 
 
     $("#myCarousel").carousel(1); 
 
    }); 
 
    $(".item3").click(function(){ 
 
     $("#myCarousel").carousel(2); 
 
    }); 
 
    $(".item4").click(function(){ 
 
     $("#myCarousel").carousel(3); 
 
    }); 
 
    
 
    // Enable Carousel Controls 
 
    $(".left").click(function(){ 
 
     $("#myCarousel").carousel("prev"); 
 
    }); 
 
    $(".right").click(function(){ 
 
     $("#myCarousel").carousel("next"); 
 
    }); 
 

 
    $("#myCarousel").on('slid.bs.carousel', function() { 
 
     $('.item img').removeClass('testing') //Remove every class no check necessary 
 
     $('.item.active img').addClass('testing'); 
 
    }); 
 
}); 
 
</script> 
 

 
</body> 
 
</html>

出典

2017-09-20 09:14:40 Doomenik

あなたは正しいので、私は自分の答えを削除します。 – Ashiquzzaman

私の間違い申し訳ありませんが、最初の.item .link-txtにクラステストを追加するだけです。削除しないで、クラスを他の.itemに追加しないでください.link-txt – probablybest

@probablybestクラスはアクティブですかすべてのスライドで変更？またはそれは最終的に最初のアイテムにとどまりますか？ – Doomenik

ブートストラップ項目がアクティブな場合divに追加してから削除する

答えて

関連する問題