Изменение CSS с JQuery без изменения класса

Question

Здесь у меня есть некоторый код:

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/

Здесь мне нужно, когда я нажимаю на кнопку 1, чтобы изменить цвет, но также, если я нажимаю на кнопку 2, чтобы изменить цвет на 2 кнопки, но также 1 кнопку, чтобы потерять цвет ... все это, чтобы не было ни одного 1 баттона и 2 баттона на втором div ... как я могу это сделать? Есть ли способ сделать это? БЛАГОДАРЯ!

id_add_ ... не обязательно здесь, но является частью кода, поэтому я решил показать здесь.

Answer 1

Я расширяюсь на Titanium's answer, found here.

Чтобы изменения цвета оставались внутри каждого набора кнопок, просто сделайте изменение титана относительно родителя. Кроме того, чтобы заставить его работать как с кнопкой, так и с кнопкой 1, просто добавьте их в селектор.

$(".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

Пожалуйста, обратитесь к .css() функции в JQuery: http://api.jquery.com/css/

Добавьте это в ваш код и вы должны получить результаты, которые вы просили:

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; 

}); 

Рабочая пример

http://jsfiddle.net/DsCw3/