在多个按钮中调用相同的jQuery函数

Question

我对jQuery并不熟悉.我有这个代码,我下载创建一个淡入/淡出弹出窗体.这是代码:

<script type='text/javascript'>
    $(document).ready(function() {
        $('#button').click(function(e) { 
            $('#modal').reveal({ 
                animation: 'fade',
                animationspeed: 150,
                closeonbackgroundclick: true, 
                dismissmodalclass: 'close'
            });
            return false;
        });
    });
</script>

id='button'单击带有a的按钮时,将执行上面的代码.现在我有多个按钮,如何在所有按钮中调用此功能？我尝试设置id所有按钮,button但只有第一个按钮工作.任何帮助将非常感谢.顺便提一下,我忘记提及,在我的.php文件中我有这样的代码:

for ($c=1;$c<=5;$c++){
echo "<input type='button' id='button'">
};

这个PHP代码将显示5个具有相同ID的按钮,即"按钮".我想要发生的是当我点击jQuery函数将执行的5个按钮中的任何一个时,它会弹出淡入/淡出形式.

Answer 1

第一解决方案

function doClick(e) { 
   $('#modal').reveal({ 
     animation: 'fade',
     animationspeed: 150,
     closeonbackgroundclick: true, 
     dismissmodalclass: 'close'
   });
   return false;
}
$('#button1').click(doClick);
$('#button2').click(doClick);

二解决方案:

给所有涉及的按钮一个类"someClass"

<input type=button class=someClass ...

并做

$('.someClass').click(function(e) { 
...
});

第三种方案:

使用逗号分隔ID:

$('#button1, #button2').click(function(e) { 
...
});

通常,最好的解决方案是第二个:它允许您在代码中添加按钮而无需修改javascript部分.如果您动态添加其中一些按钮,您甚至可以这样做

$(document).on('click', '.someClass', function(e) { 
...
});