Question

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

我的问题是：我希望，在这个函数中，设置字体颜色为具有此功能的html元素onclick。但我没有成功。我的代码：

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

任何想法为什么？

谢谢！

Answer 1

我建议

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

Answer 2

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

<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）函数时，首先调用重置函数，然后设置新元素：

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

这样，以 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');
        });
    });
});

如果我是正确的，问题是click事件被绑定到所有列表项（li）。单击一个列表项时，将对所有列表项触发事件。

我在你的代码中添加了一个简单的.each（）。它将遍历每个列表项并将事件分别绑定到每个列表项。

干杯，

-Robert Hurst

javascript设置元素背景颜色

6 个答案: