javascript设置元素背景色

问题描述

| 我有一个小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一个），可以部分满足我的需求。新的问题是：我希望仅在最后单击的项目上设置背景颜色，而不是在我单击的所有项目上设置背景颜色。上面的代码：

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

有什么想法吗？ 谢谢！     

解决方法

我会建议

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

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

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

更改该元素的前景色：

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

如果只想更改最后单击的元素的背景色，则每个元素必须具有不同的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\";
    }
}

调用selecteazaElement（this）函数时，首先调用Reset函数，然后设置新元素：

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

这样，所有以product_types开头并带有数字的元素都将重置为一种特定的颜色，只有单击的元素才会更改背景。     ,调用函数时，其“作用域”是单击的元素，因此您应该能够执行以下操作：

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

    ,

$(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>

    ,将jQuery click事件附加到\'＃product_types a \'中，该事件将从与该选择器匹配的所有元素的父类中移除一个类；然后，将包含所需样式的类添加回刚刚单击的元素的父级。它有点笨拙，可以提高效率，但是可以工作。 我在jsFiddle中做了一个例子：http://jsfiddle.net/jszpila/f6FDF/     ,试试这个代替：

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

如果我是正确的，那么问题是click事件已绑定到所有列表项（li）。单击一个列表项时，将在所有列表项上触发事件。 我在您的代码中添加了一个简单的.each（）。它将遍历每个列表项并将事件分别绑定到每个列表项。 干杯， -罗伯特·赫斯特