如何更改列表元素內的div背景顏色？

我是jQuery的新手，我有一個包含7個項目的列表，每個項目包含一個圖像和一個div。我試圖使用jQuery單擊圖像時將div背景顏色從黑色更改爲橙色。與第一個<li>元素它工作正常，但問題是我點擊另一個圖像之前的div顏色保持點擊。如何更改列表元素內的div背景顏色？

codeIi'm使用其中.imageRecharge是圖像類和radioID是div類。我使用的是siblings()方法來改變其他的div，但它不工作：

$(document).ready(function() { 
    $('.imageRecharge').click(function() { 
     $(this).parent().find('.radioID').css({ 'backgroundColor': '#FF6600', 'color': 'black' }) 
     $(this).parents().find(' .radioID').siblings().css({ 'backgroundColor': 'black', 'color': '#FF6600' }); 
    }); 
});

來源

2015-03-30 inna

內點擊功能，重置背景c在更改當前單擊的元素的背景色之前，將所有元素的默認值設置爲默認值。另外你的CSS不正確，它應該是'background-color'，而不是'backgroundColor'。如果你發佈你的HTML，我會讓小提琴向你展示。 – APAD1 2015-03-30 19:46:55

你可以添加一個你得到的HTML代碼片段嗎？ – Huangism 2015-03-30 19:49:04

請提供JSfiddle – DMishra 2015-03-30 19:49:45

這是你要完成的任務： http://jsfiddle.net/1e27hkxa/1/

JQuery的：

$('ul').on('click', '.imageRecharge', function() { 
    $(this).parents().find('.radioID').css('background', 'black'); 
    $(this).parent().css('background', '#f60'); 
});

HTML： <ul> <li><div class="radioID"><img class="imageRecharge" src="" /></div></li> <li><div class="radioID"><img class="imageRecharge" src="" /></div></li> </ul>

CSS：

ul { 
    list-style: none; 
    padding: 0; 
} 
ul li { 
    display: inline-block; 
    background: #000; 
} 
ul li .radioID { 
    padding:5px; 
} 

img { 
    display: block 
}

來源

2015-03-30 20:10:36

非常感謝你，你解決了我的問題！ – inna 2015-03-31 07:42:47

我認爲你正在尋找background-color CSS屬性（不backgroundColor）

注意，CSS一般使用破折號當你嘗試的時候，定義屬性名稱而不是camelCase。

來源

2015-03-30 19:47:39 s1lence

雖然這個事實是正確的，但它不是一個完整的答案，並已發佈爲註釋... – 2015-03-30 19:49:30

jQuery可以同樣解釋多字屬性的CSS和DOM格式，所以兩者都是正確的 – 2015-03-30 19:49:38

好點@JamesKing – APAD1 2015-03-30 19:53:03

如何更改列表元素內的div背景顏色？

回答

相關問題