jQuery的div單選按鈕效果

Question

我對CSS和jquery真的很陌生，需要我的項目幫助。

我有3個按鈕：劣勢-平均-優勢，我需要使此按鈕像單選按鈕一樣工作，因此，如果我單擊劣勢，則此按鈕會更改背景顏色，如果單擊他，則其他按鈕會失去顏色。 和劣勢按鈕變為紅色背景色。

• 如果我單擊“平均”按鈕，那么如果之前單擊過此按鈕，則該按鈕必須變為黃色，而其他顏色則消失

-如果單擊平均按鈕，則此按鈕必須具有綠色背景色，而其他按鈕則失去顏色。 就像單選按鈕

但是我嘗試根據#ID

$('#price_quality_adv').css('background-color','#C90');
            $('#reliability_adv').css('background-color','#C90');

http://jsfiddle.net/EC44Z/5/

請幫忙。 對不起我的英語謝謝！

Answer 1

似乎是某種范圍的問題，不確定它是否是jsFiddle環境所獨有的。 當我進行此更改時，它是固定的（至少對於優勢按鈕而言）

setQuality = function(qulaity, type_rating, name)

小提琴： http : //jsfiddle.net/EC44Z/8/

但是，還有其他一些問題，代碼有點復雜。 最好做類似...

HTML

<a href="#" id="button_advantage" class="button">advantage</a>

CSS

.button{ /* styles for all buttons */ }
.selected{ /* styles for selected button */ }

JS（jQuery）

$("#button_advantage").on('click',function(){
    $(this).addClass('selected')
    $(this).siblings().removeClass('selected')
})

摘要

代碼應該分開，以便於維護，在各種環境下都能很好地工作並獲得良好的搜索排名等。

HTML是用於內容的，因此應進行標記，並使用適當的類將相似的項目分組，並為相關元素提供唯一的ID。

CSS是用於樣式的，所有樣式應盡可能地保持在一起。

JS是用於動態功能的，因此在這種情況下，添加一個類，以便更改樣式。