divs中单选按钮效果的Jquery

Question

我对css和jquery非常陌生，我需要帮助我的项目。

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

• 如果我点击了平均按钮，这个按钮必须是黄色的，而如果之前点击了他，其他的则会失去颜色

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

但我试着这么做是基于#ID

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

http://jsfidle.net/ec44z/5/

请帮帮忙。对不起我的英语谢谢！

Answer 1

似乎是某种范围问题，不确定它是否是jsFiddle环境所独有的。当我进行此更改时，它是固定的（至少对于advantage按钮）

setQuality = function(qulaity, type_rating, name)

还有一些其他的问题，但是代码有点复杂。不如做点像...

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

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

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

代码应该是分开的，这样更容易维护，在各种环境下都能很好地工作，并且得到很好的搜索排名等等。

HTML用于内容，并且应该标记为内容，并使用适当的类来分组类似的项目，以及相关元素的唯一id。

CSS是用于样式的，所有样式都应该尽可能地放在一起。

JS是用于动态功能的，因此在本例中，添加一个类，使样式发生变化。