JavaScript设置元素背景颜色。

Question

我有一个小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');
    });
});

任何想法为什么？谢谢！

- dana

---

当它被渲染后，它是什么样子？如果id和stock不是数字，你需要加引号。另外，如果你想要链接改变背景颜色，改变parentNode.className或parentNode.style.backgroundColor。 - mplungjan

你传递的参数值是什么？如果我们执行alert(id); alert(stock)，会得到什么？ - ankur

Answer 1

我建议

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

- standup75

Answer 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开头并跟着一个数字的元素都会被重置为一种特定的颜色，只有被点击的元素的背景才会改变。

- lightningmanic

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

- danjah

---

这样也不行。我已经修改了我的问题，如果你能给我一些建议的话，谢谢！ - dana

尝试使用'backgroundColor'代替'background-color'。JavaScript中连接CSS属性的语法采用驼峰式命名法。 - danjah

是的 - 在发布之前我已经阅读过了，我评论了camelCase，因为我觉得使用它可能会在以后某个时候节省你那几个调试会话:D 我注意到jQuery可以理解两种语法。 - danjah

Answer 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>

- Neo

Answer 5

试试这个：

//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()。它将循环遍历每个列表项，并分别绑定一个事件。

祝好，

- Robert Hurst

- Robert Hurst

Answer 6

将jQuery的click事件附加到'#product_types a'上，该事件从与该选择器匹配的所有元素的父级中删除一个类；然后，将包含所需样式的类添加回刚刚单击的元素的父级。这有点笨重，但可以更有效率地实现。

我在jsFiddle中提供了一个示例：http://jsfiddle.net/jszpila/f6FDF/

- jszpila