jqueryで親クラスの背景色を変更するには

Question

こんにちは、私は.carousel-indicatorsと置かれたブートストラップカルーセルを作成しようとしていますrelative。 しかし、このため、各カルーセル項目のbackground-colorは、インジケータが配置されている上部には適用できないため、
には設定できません。
したがって、親クラスにbackground-color属性を適用しようとしています。 、

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="false"> 

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

     <!-- Indicators --> 
     <ol class="carousel-indicators text-left"> 
     <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> 
     <li data-target="#carousel-example-generic" data-slide-to="1"></li> 
     <li data-target="#carousel-example-generic" data-slide-to="2"></li> 
     <li data-target="#carousel-example-generic" data-slide-to="3"></li> 
     </ol> 

     <div id="item0" class="item active"> 
     </div> 
     <div id="item1" class="item"> 
     </div> 
     <div id="item2" class="item"> 
     </div> 
     <div id="item3" class="item"> 
     </div> 
    </div> 
</div> 

そして以下は、私が試したのjQueryコードである
しかし、それは動作しませんと私は思ったんだけど、なぜ：

これは私のHTMLコードです。

$(document).ready(function() { 
 
    if ($("#item2").hasClass('active')) { 
 
     $(".carousel-inner").css('background-color, '#d4ddde'); 
 
    } 
 
    else { 
 
     $(".carousel-inner").css('background-color, 'none'); 
 
    } 
 
});

私はjQueryの文法を編集したが、まだ動作しません。

Answer 1

あなたのコードは、ページの開封時に一度だけ実行されます。したがって、カルーセルがスライドし、ブートストラップが彼のアイテムにactiveクラスを追加すると、コードは再実行されません。ブートストラップを提供するコールバック関数を使用する必要があります。

ブートストラップのカルーセルプラグインの火災2つのイベントのスライドが移動します。

• スライド：このイベントが発生し、すぐにスライドインスタンスメソッドが呼び出されます。
• スライド：このイベントは、カルーセルのスライド遷移が完了すると発生します。

移行中に何が起こったかを見たい場合や、クラスを任意のものに追加したい場合は、これらのイベントを使用することができます。

このコードは、以下の修正する必要があります：あなたのケースでは

$('#carousel-example-generic').on('slide', function() { 
    //Do something before the animation 
}); 

$('#carousel-example-generic').on('slid', function() { 
    //Do something after the animation 
});​​ 

：これは、あなたが追加し、これらのjQueryを使ってのイベントを見ることができる方法です

：

のコードを見てみましょうあなたの問題：

$(document).ready(function() { 
    $('#carousel-example-generic').on('slide', function() { 
     if ($("#item2").hasClass('active')) { 
      $(".carousel-inner").css('background-color, '#d4ddde'); 
     } 
     else { 
      $(".carousel-inner").css('background-color', 'none'); 
     } 
    }); 
}); 

ここで公式のブートストラップのカルーセルドキュメントです：http://getbootstrap.com/2.3.2/javascript.html#carousel

Answer 2

これを試してみてください：

$(document).ready(function() { 
    if ($("#item2").hasClass('active')) { 
     $(".carousel-inner").css('background-color', '#d4ddde'); 
    } 
    else { 
     $(".carousel-inner").css('background-color' , 'none'); 
    } 
}); 

ドキュメントを.hasClassのために：の.cssためhere

ドキュメント：here

Answer 3

jqueryの問題のhasClassとcss使い方が間違っています。次のコードを使用してください：

$(document).ready(function() { 
    if ($("#item2").hasClass('active')) { 
     $(".carousel-inner").css('background-color','#d4ddde'); 
    } 
    else { 
     $(".carousel-inner").css('background-color','transparent'); 
    } 
});