顯示動態更改容器背景作爲子項

我有一些問題，弄清楚如何根據內容的可見性操縱容器。顯示動態更改容器背景作爲子項

在這種情況下，它是一個帶有兩個幻燈片的滑塊。鑑於它可能有許多不同「顏色」的幻燈片;我想改變容器的背景顏色。

<div class="slider-container"> 

    <div class="slider-post red" aria-hidden="false"> 
     some content 
    </div> 

    <div class="slider-post green" aria-hidden="true"> 
     some other content 
    </div> 
</div>

滑塊使用aria-hidden來確定幻燈片是否可見。

所以我在想什麼了：

if ($('.slider-post').hasClass('red') && $('.red').attr('aria-hidden') == "false") { 
    $('slider-container').addClass('red-container'); 
} 
else if($('.slider-post').hasClass('green') && $('.green').attr('aria-hidden') == "false") { 
    $('slider-container').addClass('green-container'); 
}

但這導致slider-container始終是紅色的，red-container。我想這是因爲一旦if語句評估爲true，它會停止檢查任何進一步。

那麼我將如何持續檢查'陳述'是真是假？此外，我可以看到我會碰上再次去除添加的類，考慮下面的例子中的一個問題：

if ($('.slider-post').hasClass('red') && $('.red').attr('aria-hidden') == "false") { 
    $('slider-container').addClass('red-container'); 
    $('slider-container').removeClass('green-container'); 
}

如果有什麼是有黃色，藍色，棕色容器，等等？

來源

2017-10-19 odinp123

你爲什麼不exectue在滑塊的JS這一點，如果其他的事情嗎？ – void

偉大的問題。在這種特殊情況下，它是生成滑塊的第三方插件。所以如何實施是我無法實現的。此外，顏色類是從後端動態添加的，並且是用戶生成的。所以我需要處理與我在這裏得到的情況:( – odinp123

你必須有它的js是正確的嗎？你可以讀一下代碼並計算出來.. – void

我想你可以將幻燈片更改操作附加到事件。例如，點擊next/prev箭頭。這樣，你的if語句將被檢查。

如果你有很多的幻燈片，你可以得到它的背景色和這種顏色適用於您的容器：

var color = $(this).css("backgroundColor"); 
$('slider-container').css("backgroundColor", color);

來源

2017-10-20 14:07:10 Korr

謝謝，那是一個好主意，經過更多的研究後，我發現我可以利用下一張幻燈片之前所要求的事件。 – odinp123

顯示動態更改容器背景作爲子項

回答

相關問題