jquery - 如何为每个 3 个不同的按钮执行不同的操作？

Question

好吧，我有 3 个按钮，这些按钮必须只有一个类.fdm，所以每个按钮怎么可能有不同的动作只是调用类？

我实际使用，但像这样我必须为每个按钮设置 id。我不想要这个，我只想设置一个类名并识别所有按钮的差异肌动蛋白。

JS：

jQuery(function(){
$('#r').bind('click',function(){
$('#alvo').css('background','#ff0000');
})
$('#g').bind('click',function(){
$('#alvo').css('background','#155c00');
})
$('#b').bind('click',function(){
$('#alvo').css('background','#001eff');
})
})

HTM：

<div id="alvo" style="width:200px;height:200px;border:2px #000 solid;">
</div>

<button class="fdm" type="button" id="r">R</button>
<button class="fdm" type="button" id="g">G</button>
<button class="fdm" type="button"  id="b">B</button>

就像我说的，我只想对所有按钮使用类名

小提琴

Answer 1

在这里更新了小提琴

http://jsfiddle.net/EGn9z/2/

$(function(){

    $ ( ".fdm" ).click( function(){
        $('#alvo').css('background', $(this).attr("data-color"));
    });

})

<div id="alvo" style="width:200px;height:200px;border:2px #000 solid;">
</div>

<button class="fdm" type="button" id="r" data-color="#ff0000">R</button>
<button class="fdm" type="button" id="g" data-color="#00ff00">G</button>
<button class="fdm" type="button" id="b" data-color="#0000ff">B</button>

已将颜色放入数据属性中

Answer 2

由于您无法添加其他类且无法使用，您可以使用按钮id的 来决定操作：text

$(function(){
  $('.fdm').bind('click',function(){
    var text = $(this).text();
    if(text  == 'R')
        $('#alvo').css('background','#ff0000');
    if(text  == 'G')
        $('#alvo').css('background','#155c00');
    if(text  == 'B')
        $('#alvo').css('background','#001eff');
  }) ;    

});