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

有什么想法吗？

谢谢！

Answer 1

我建议

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

Answer 2

您的元素可以包含以下代码：

要更改该元素的前景色：

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

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

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

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>

Answer 5

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

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

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

干杯，

-罗伯特·赫斯特