2

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

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

  • 如果我点击平均按钮，如果之前点击过他，这个按钮必须变成黄色和其他失去颜色

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

但是我尝试根据#ID 来做到这一点

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

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

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

4

1 回答 1

0

似乎是某种范围问题，不确定它是否是 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是为了动态功能，所以在这种情况下，添加一个类，让样式发生变化。

于 2013-03-13T21:44:22.520 回答