Change css with jquery without changing class

Question

Here I have some code:

HTML

<div>
    <div class="ca_button"><a href="javascript:void(0)" class="ca_button" onClick="setQuality(-100, 'price_quality', '{$lang501}/{$lang502}');">1 button</a></div>
<div class="ca_button1"><a href="javascript:void(0)" class="ca_button1" onClick="setQuality(100, 'price_quality', '{$lang501}/{$lang502}');">2 button</a></div>
</div>
<div>
<div class="ca_button"><a href="javascript:void(0)" class="ca_button" onClick="setQuality(100, 'parameter2', '{$lang501}/{$lang502}');">1 button</a></div>
<div class="ca_button1"><a href="javascript:void(0)" class="ca_button1" onClick="setQuality(100, 'parameter2', '{$lang501}/{$lang502}');">2 button</a></div>
</div>

JS

var rating_quality = new Array();
function setQuality(qulaity, type_rating, name)
{
    //alert('test' + qulaity + ' ->' + type_rating + ' ' + name);   
    rating_quality[type_rating] = qulaity;
    if(qulaity > 0)
    {
        //console.log($('#id_adv_' + type_rating).length);
        if ($('#id_adv_' + type_rating).length == 0)
        {
            $('#id_add_adventage').append("<div id='id_adv_" + type_rating + "'>" + name + "</div>");
            $('#id_disadv_' + type_rating).remove();
            $('#id_add_adventage').css('font-size', '12');
            $(this).css('background-color', '#9C0');


        }
    }
    else
    {
        if ($('#id_disadv_' + type_rating).length == 0)
        {
            $('#id_add_disadventage').append("<div id='id_disadv_" + type_rating + "'>" + name + "</div>");
            $('#id_adv_' + type_rating).remove();
            $('#id_add_disadventage').css('font-size', '12');
            $(this).css('background-color', '#C00');

        }
    }
    //console.log('------------ispis-------------');
    /*for(key in rating_quality)
    {
        console.log('key:'+ key + ' ' + rating_quality[key]);
    }
    */
}

css

.ca_button  {
    display: inline-block;
    text-decoration: none;
    padding: 10px 20px;
    text-align: center;
    background-color: #BABABA;
    border-color: #FFFFFF;
    border-width: 1px;
    -webkit-border-radius: 4px 0px 0px 4px;
    border-radius: 4px 0px 0px 4px;
    border-style: solid;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    line-height: 120%;
    color: #FFF;
    -moz-border-radius: 4px 0px 0px 4px;
    min-height:8px;
    margin-top:15px;
    margin-left:48px;
}

.ca_button1  {
    display: inline-block;
    text-decoration: none;
    padding: 10px 20px;
    text-align: center;
    background-color: #BABABA;
    border-color: #FFFFFF;
    border-width: 1px;
    -webkit-border-radius: 0px 4px 4px 0px;
    border-radius: 0px 4px 4px 0px;
    border-style: solid;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    line-height: 120%;
    color: #FFF;
    -moz-border-radius: 0px 4px 4px 0px;
    width:73px;
    min-height:15px;
    margin-top:15px;
}

.button1:hover {
    background-color: #91B522;
    color: #FFF;
}

.button1:active {
    background-color: #91B522;
    color: #FFF;
}

.button1:visited {
    background-color: #91B522;
    color: #FFF;
}

http://jsfiddle.net/nJ895/8/

Here I need when I click on 1button to change color but also if I click on 2button to change color on 2button but also 1button to lose color... all this to not afect the 1button and 2button on second div... how I can do that? Is there any way to do that? THANKS!

id_add_ ... is not neccecary here but is part of code so I decide to show here.

Answer 1

I'm expanding on Titanium's answer, found here.

In order to make the color changes stay within each set of buttons, simply make Titanium's change relative to the parent. Also, to make it work on both button and button1, just add them to the selectors.

$(".ca_button, .ca_button1").click(function() {

  // Set $this to the clicked div, or the div holding the a that was clicked
    $this = $(this);
    if($this.is("a")) { $this = $this.parent(); }

 // Set $par to the parent of that div - this is the div that holds a given set of buttons
    $par = $this.parent();

 // Set the background color for all buttons in this set
    $par.find(".ca_button, .ca_button1").css("background-color", "#bababa");

 // Set the color of the currently clicked div
    if ($(this).hasClass("ca_button1")){
        $this.css("background-color", "#0F0");
    } else {
        $this.css("background-color", "#F00");
    }

    return false;

});

http://jsfiddle.net/daCrosby/EC44Z/3/

Answer 2

Please refer to .css() function in jQuery: http://api.jquery.com/css/

Add this to your code and you should get the results that you have asked for:

JS

$(".ca_button").click(function() {

    // Declare '$(this)' so it can be changed later
    $this = $(this);

    // If this is an 'a' tag, change $this
    if($this.is("a")) { $this = $this.parent(); }

    // Remove the background colour on all other buttons
    $(".ca_button").css("background-color", "#bababa");

    // Change the background colour on the button that has been clicked
    $this.css("background-color", "#f00");

    // Because there can be two elements called .ca_button when clicking,
    // we're returning false to stop the function from happening again
    return false;

});

Working example

http://jsfiddle.net/DsCw3/