如何更改列表元素内的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背景颜色？

回答

相关问题