Question

我有3个按钮，这些按钮必须只有一个类.fdm，那么每个按钮如何才能调用该类只有不同的动作？

我实际上正在使用，但是像这样我必须为每个按钮设置id。我不想要这个，我想设置一个类名并识别所有按钮的diff actins。

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>

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

Fiddle

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

});

如何使用不同的3个不同的按钮？

2 个答案: