更改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按鈕上的顏色，但也會失去顏色1button ...所有這一切都不會影響第二個div上的1按鈕和2按鈕...我怎麼能做到這一點？有沒有辦法做到這一點？謝謝！

id_add_ ...這裏不是壞死的，而是代碼的一部分，所以我決定在這裏展示。

Answer 1

我在擴大Titanium's answer, found here。

爲了使顏色更改保持在每組按鈕中，只需使Titanium相對於父項進行更改即可。另外，要使它在按鈕和按鈕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/