javascript 设置元素背景颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6108491/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
javascript set element background color
提问by dana
i have a little javascript function that does something when one clicks on the element having onclick that function.
我有一个小的 javascript 函数，当单击具有 onclick 该函数的元素时，它会执行某些操作。
my problem is: i want that, into this function, to set a font color fot the html element having this function onclick. but i don't suceed. my code:
我的问题是：我希望在此函数中为具有此函数 onclick 的 html 元素设置字体颜色。但我没有成功。我的代码：
<script type="text/javascript">
function selecteazaElement(id,stock){
document.addtobasket.idOfSelectedItem.value=id;
var number23=document.addtobasket.number;
number23.options.length=0;
if (stock>=6) stock=6;
for (i=1;i<=stock;i++){
//alert ('id: '+id+'; stock: '+stock);
number23.options[number23.options.length]=new Option(i, i);
}
}
</script>
and how i use it:
以及我如何使用它：
<li id = "product_types">
<a href="#" onclick='selecteazaElement(<?= $type->id; ?>,<?= $type->stock_2; ?>);'><?= $type->label; ?></a>
</li>
any suggestions? thanks!
有什么建议？谢谢！
i have added another function (jquery one) that does partially what i need. the new problem is: i want that background color to be set only on the last clicked item, not on all items that i click. code above:
我添加了另一个功能（jquery 一个），它可以部分满足我的需求。新问题是：我希望只在最后点击的项目上设置背景颜色，而不是在我点击的所有项目上设置。上面的代码：
$(document).ready(function() {
$('.product_types > li').click(function() {
$(this)
.css('background-color','#EE178C')
.siblings()
.css('background-color','#ffffff');
});
});
any ideas why?
任何想法为什么？
thanks!
谢谢！
采纳答案by standup75
I would suggest
我会建议
$(document).ready(function() {
$('.product_types > li').click(function() {
$('.product_types > li').css('background-color','#FFFFFF');
$(this).css('background-color','#EE178C');
});
});
回答by lightningmanic
Your element could have this code:
您的元素可能具有以下代码：
<li id = "product_types" onclick="selecteazaElement(this);" <...> </li>
<li id = "product_types" onclick="selecteazaElement(this);" <...> </li>
To change the foreground color of that element:
要更改该元素的前景色：
function selecteazaElement(element)
{
element.style.foregroundColor="#SOMECOLOR";
}
If you want to change the background color on only the last element clicked, each element must have a different id. I'd suggest naming each one something like product_types1, product_types2, ..., product_typesN, and so on. Then have a resetfunction:
如果您只想更改单击的最后一个元素的背景颜色，则每个元素必须具有不同的 id。我建议将每个名称命名为product_types1、product_types2、...、product_typesN等。然后有一个复位功能：
function Reset()
{
for (var i = 1; i <= N; i = i + 1)
{
document.getElementById('product_types'+i).style.backgroundColor="#RESETCOLOR";
}
}
When you call your selecteazaElement(this)function, first call the Resetfunction, then set the new element:
当您调用selecteazaElement(this)函数时，首先调用Reset函数，然后设置新元素：
function selecteazaElement(element)
{
Reset();
element.style.backgroundColor="#SOMECOLOR";
}
This way all of the elements that start with product_typesfollowed by a number will be reset to one particular color, and only the element clicked on will have the background changed.
这样，所有以product_types和数字开头的元素都将重置为一种特定颜色，并且只有单击的元素才会更改背景。
回答by Robert Hurst
try this instead:
试试这个：
//ON PAGE LOAD
$(document).ready(function() {
//SELECT ALL OF THE LIST ITEMS
$('.product_types > li').each(function () {
//FOR EACH OF THE LIST ITEMS BIND A CLICK EVENT
$(this).click(function() {
//GRAB THE CURRENT LIST ITEM, CHANGE IT BG, RESET THE REST
$(this)
.css('background-color','#EE178C')
.siblings()
.css('background-color','transparent');
});
});
});
If I am correct, the problem is that the click event is being binded to all of the list items (li). when one list item is clicked the event is fired on all of the list items.
如果我是对的，问题是单击事件被绑定到所有列表项 (li)。单击一个列表项时，所有列表项都会触发该事件。
I added a simple .each() to your code. It will loop through each of the list items and bind a event to each separately.
我在你的代码中添加了一个简单的 .each() 。它将遍历每个列表项并分别为每个列表项绑定一个事件。
Cheers,
干杯，
-Robert Hurst
——罗伯特·赫斯特
回答by danjah
The 'scope' of the function when invoked is the element clicked, so you shouldbe able to just do:
调用时函数的“范围”是单击的元素，因此您应该能够执行以下操作：
function selecteazaElement(id,stock){
document.addtobasket.idOfSelectedItem.value=id;
var number23 = document.addtobasket.number;
number23.options.length=0;
if (stock>=6){
stock=6;
}
for (var i=1;i<=stock;i++){
//alert ('id: '+id+'; stock: '+stock);
number23.options[number23.options.length]=new Option(i, i);
}
// Alter 'this', which is the clicked element in this case
this.style.backgroundColor = '#000';
}
回答by Neo
$(function() {
/*if product_types is a class of element ul the code below
will work otherwise use $('li.product_types') if it's a
class of li elements */
$('.product_types li').click(function() {
//remove this class that causes background change from any other sibling
$('.altBackground').removeClass('altBackground');
//add this class to the clicked element to change background, color etc...
$(this).addClass('altBackground');
});
});
Have your css something like this:
让你的 css 是这样的：
<style type='text/css'>
.altBackground {
background-color:#EE178C;
/* color: your color ;
foo: bar */
}
</style>
回答by jszpila
Attach a jQuery click event to '#product_types a'that removes a class from the parent of all elements that match that selector; then, add the class that contains the styles you want back to the parent of the element that was just clicked. It's a little heavy handed and can be made more efficient but it works.
将 jQuery click 事件附加到“#product_types a”，从与该选择器匹配的所有元素的父元素中删除一个类；然后，将包含您想要的样式的类添加回刚刚单击的元素的父级。它有点笨手笨脚，可以提高效率，但它有效。
I've made an example in jsFiddle: http://jsfiddle.net/jszpila/f6FDF/
我在 jsFiddle 做了一个例子：http: //jsfiddle.net/jszpila/f6FDF/
