javascript - 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)

fiddle :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是为了动态功能，所以在这种情况下，添加一个类，让样式发生变化。