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是用于动态功能的，因此在这种情况下，添加一个类，以便更改样式。