javascript设置元素背景颜色答案

【问题标题】：javascript set element background colorjavascript设置元素背景颜色
【发布时间】：2011-08-31 19:08:32
【问题描述】：

我有一个小的 javascript 函数，当单击具有 onclick 函数的元素时会执行一些操作。

我的问题是：我希望在此函数中为具有此函数 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>

以及我如何使用它：

<li id = "product_types">
    <a href="#" onclick='selecteazaElement(<?= $type->id; ?>,<?= $type->stock_2; ?>);'><?= $type->label; ?></a>
</li>

有什么建议吗？谢谢！

我添加了另一个功能（jquery one），它部分完成了我需要的功能。新问题是：我希望仅在最后点击的项目上设置背景颜色，而不是在我点击的所有项目上。上面的代码：

$(document).ready(function() {
    $('.product_types > li').click(function() {
    $(this)
        .css('background-color','#EE178C')
        .siblings()
        .css('background-color','#ffffff');
    });
});

任何想法为什么？

谢谢！

【问题讨论】：

渲染后的效果如何？如果 id 和 stock 不是数字，则需要引号。此外，如果您希望链接更改背景颜色，请改为更改 parentNode.className 或 parentNode.style.backgroundColor
你传递的参数的值是什么，如果我们做一些事情，我们会得到什么 alert(id);警报（股票）

标签： javascript jquery colors onclick

【解决方案1】：

建议

$(document).ready(function() {
    $('.product_types > li').click(function() {
      $('.product_types > li').css('background-color','#FFFFFF');
      $(this).css('background-color','#EE178C');
    });
});

【讨论】：

【解决方案2】：

您的元素可能有以下代码：

<li id = "product_types" onclick="selecteazaElement(this);" <...> </li>

更改该元素的前景色：

function selecteazaElement(element)
{
    element.style.foregroundColor="#SOMECOLOR";
}

如果您只想更改最后点击的元素的背景颜色，则每个元素必须有不同的 id。我建议将每个名称命名为 product_types1、product_types2、...、product_typesN 等。然后有一个reset函数：

function Reset()
{
    for (var i = 1; i <= N; i = i + 1)
    {
        document.getElementById('product_types'+i).style.backgroundColor="#RESETCOLOR";
    }
}

当你调用 selecteazaElement(this) 函数时，首先调用 Reset 函数，然后设置新元素：

function selecteazaElement(element)
{
    Reset();
    element.style.backgroundColor="#SOMECOLOR";
}

这样，所有以 product_types 开头后跟一个数字的元素都将被重置为一种特定的颜色，并且只有单击的元素才会改变背景。

【讨论】：

【解决方案3】：

调用时函数的“作用域”是被点击的元素，所以你应该能够做到：

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';
}

【讨论】：

也不是这样工作的。我已经编辑了我的问题，以防你能给我一些线索。谢谢！
尝试使用 'backgroundColor' 而不是 'background-color'。连接 CSS 属性的 Javascript 语法用 camelCase 表示。
是的 - 我在发布之前阅读了该内容，我对 camelCase 进行了评论，因为我觉得最好使用它，因为它可能会在以后的某个时候为您节省一些调试会话：DI 通知 jquery 理解这两种语法.

【解决方案4】：

$(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');
    });
});

让你的 css 像这样：

<style type='text/css'>
.altBackground {
        background-color:#EE178C;
     /* color: your color ; 
        foo: bar */
}
</style>

【讨论】：

【解决方案5】：

将一个 jQuery click 事件附加到 '#product_types a' 中，从匹配该选择器的所有元素的父级中移除一个类；然后，将包含您想要的样式的类添加回刚刚单击的元素的父级。它有点笨重，可以提高效率，但它确实有效。

我在 jsFiddle 中做了一个例子：http://jsfiddle.net/jszpila/f6FDF/

【讨论】：

【解决方案6】：

试试这个：

//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');
        });
    });
});

如果我是正确的，问题是单击事件被绑定到所有列表项 (li)。单击一个列表项时，会在所有列表项上触发该事件。

我在您的代码中添加了一个简单的 .each()。它将遍历每个列表项并分别为每个项绑定一个事件。

干杯，

-罗伯特·赫斯特

【讨论】：