jQuery的div单选按钮效果

Question

I'm realy new to css and jquery and I need help for my project.

I have 3 buttons: disadvantage - average - advantage and I need to make this buttons to work like radio buttons so if I click on disadvantage this button change background color and other butons lose colors if was clicked on him. and disadvantage button get red backrground color.

• If I click on average button, this button must get yellow color and other lose color if was clicked on him before

-If I click on average button this button must get green background color and other buttons to lose color. so like radio buttons

BUt I try to do that based on #ID's

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

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

please help. sorry for my english THANKS!

Answer 1

Seems to be a scope issue of some kind, not sure if it is exclusive to jsFiddle environment. When I make this change, it is fixed (for the advantage button at least)

setQuality = function(qulaity, type_rating, name)

Fiddle: http://jsfiddle.net/EC44Z/8/

There are still some other issues however, the code is a little complex. It is better to do something like...

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')
})

Summary

The code should be separated, so it is easier to maintain, works well in various environments, and gets good search ranking etc...

HTML is for content, and should be marked up as such, with appropriate classes to group similar items, and unique id for relevant elements.

CSS is for style, and all styles should be kept together there where possible.

JS is for dynamic functionality, so in this case, adding a class, so that the style changes.