如何通過jquery更改父類的背景顏色

嗨，我試圖使0123,定位爲relative的引導程序傳送帶。但是，正因爲如此，我無法設置每個輪播物品的background-color不同
，因爲它不能應用於指示器所在的上部。
所以我試圖將background-color屬性應用於父類。如何通過jquery更改父類的背景顏色

這是我的HTML代碼：

<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代碼，
但它不工作，我不知道爲什麼。

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

我編輯了jQuery語法，但仍然無法正常工作。

來源

2016-08-26 jyoon

我覺得爲什麼它不工作的原因是因爲你的代碼被執行只是一個時間。因此，當引導程序將「active」類添加到item2時，您的代碼不會被重新執行 – Riverside

@Riverside Thx提示！我糾正了jquery語法，但仍然不起作用。你能告訴我如何重新執行代碼嗎？ – jyoon

檢查我的答案，並告訴我，如果它的工作;） – Riverside

問題是，您的代碼僅在頁面打開時執行一次。所以當傳送帶滑動時，Bootstrap將類加到他的物品上，你的代碼不會被重新執行。你必須使用爲你提供Bootstrap的回調函數。

的引導旋轉木馬插件火2個活動時，幻燈片切換：

幻燈片：馬上此事件在被調用滑實例方法。
滑動：該事件在傳送帶完成其滑動轉換時觸發。

所以如果你想看轉換過程中發生了什麼，或者如果你想添加一個類到任何你想要的，你可能想要使用這些事件。

讓我們來看看代碼：

這是你如何添加和觀看這些事件與jQuery：

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

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

你的情況：

這下面的代碼應該可以解決你的問題：

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

這裏的官方引導旋轉木馬DOC：http://getbootstrap.com/2.3.2/javascript.html#carousel

來源

2016-08-26 14:03:13 Riverside

試試這個：

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

的文檔.hasClass：here

的文檔的.css：here

來源

2016-08-26 09:41:55 Merlin

jQuery的hasClass和css使用中的問題是不正確。使用以下內容：

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

來源

2016-08-26 09:42:06

如何通過jquery更改父類的背景顏色

回答

相關問題