使用jQuery和CSS根據另一個文本更改div的背景顏色

Question

我想使用jQuery和CSS根據另一個div的文本更改div的背景顏色。

我的HTML看起來像這樣

<div class="livenow-container">                
    <div class="live-content">
    <div class="livenow-artist">Darkpsyde</div>
    <div class="livenow-info">06/05/14 | Transcendent Tuesdays</div>
    <div class="livenow-channelcolour"></div>
    <div class="livenow-channel">Drum and Bass</div>
        <div class="live-thumb"><img src="http://cdn.krisisplay.com/assets/livepic/darkpsydelive.png" class="live"></div>
    </div>
</div>

我想基於“ livenow-channelcolour” div的直接下面的div中的文本將“ livenow-channelcolour” div的背景色更改為設置的顏色

我之前曾有人幫助過我，但我嘗試更改代碼以實現此目的，但無法正常工作。 我正在使用的代碼如下，但如果可以使用，可以很高興使用完全不同的代碼。

 $(".live-content").each(function() {

    var $el = $(this);
    var color;
    var content = $el.text().toLowerCase();

    if (content.indexOf("drum and bass") !== -1) {
        color = "#39d52d";
    }
    else if (content.indexOf("house") !== -1) {
        color = "#6dc8bf";
    }

    if (color) {
            $el.closest('div')
            .find('.livenow-channelcolour')
            .css("background-colour", color);
        }
}); 

非常感謝您提供有關此簡單但令人沮喪的問題的幫助。

非常感謝。

Answer 1

我用css的backgound屬性及其工作來進行了嘗試：

 $el.closest('div')
        .find('.livenow-channelcolour')
        .css("background", color);

碼：

$(".live-content").each(function() {

var $el = $(this);
var color;
var content = $el.text().toLowerCase();

if (content.indexOf("drum and bass") != -1) {
    color = "#39d52d";
}
else if (content.indexOf("house") != -1) {
    color = "#6dc8bf";
}

if (color) {
        console.log("if");
        $el.closest('div')
        .find('.livenow-channelcolour')
        .css("background", color);
    }

}); 

小提琴演示

Answer 2

這是一個嘗試

http://jsfiddle.net/Icepickle/uJwE6/

$(function() {
    var text = $('.live-content>.livenow-channel').text().toLowerCase(), color;
    switch (text) {
     case 'drum and bass':
        color = '#39d52d';
        break;
     case 'house':
        color = '#6dc8bf';
        break;
     default:
        color = 'transparent';
    }
    $('.live-content>.livenow-channelcolour').css('background', color).text(color);
});