Цвет фона элемента javascript

У меня есть небольшая функция 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');
    });
});

любые идеи, почему?

спасибо!

Ответы

Ответ 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";
}

Если вы хотите изменить цвет фона только на последний нажатый элемент, каждый элемент должен иметь другой идентификатор. Я бы предложил называть каждый из них что-то вроде 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, за которым следует число, будут reset для одного определенного цвета, и только элемент, на который он нажал, изменит фон.

Ответ 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';
}

Ответ 4

$(function() {
    /*if product_types  is a class of element ul the code below 
    will work otherwise  use $('li.product_types') if it 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');
        });
    });
});

Если я прав, проблема в том, что событие click привязано ко всем элементам списка (li). при нажатии одного элемента списка событие запускается во всех элементах списка.

Я добавил простой код .each() в ваш код. Он будет проходить через каждый из элементов списка и привязывать событие к каждому отдельно.

Приветствия,

-Robert Hurst