Jquery在div中的单选按钮效果

Question

我真的很喜欢css和jquery，我需要帮助我的项目。

我有3个按钮：缺点 - 平均 - 优势，我需要使这个按钮像单选按钮一样工作，所以如果我点击缺点这个按钮改变背景颜色和其他按钮失去颜色，如果被点击他。和劣势按钮获得红色背景颜色。

• 如果我点击平均按钮，如果在点击他之前，此按钮必须变为黄色，其他颜色会失去颜色

- 如果我点击平均按钮，此按钮必须获得绿色背景颜色和其他按钮以失去颜色。就像单选按钮一样

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