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

我对jQuery并不熟悉。我有我下载的代码来创建淡入/淡出弹出窗体。代码如下：在多个按钮中调用相同的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'的按钮时执行。现在我有多个按钮，如何在所有按钮中调用此功能？我尝试将所有按钮的id设置为button，但只有第一个按钮有效。任何帮助将非常感激。通过我忘了提及的方式，在我的PHP文件我有这样的代码：

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

这PHP代码将显示5个按键具有相同的ID是“按钮”。我想要发生的是当我点击jQuery函数执行的5个按钮中的任何一个时，弹出淡入/淡出形式。

来源

2012-10-26 clydewinux

解决方案一：

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) { 
... 
});

来源

2012-10-26 08:07:15

+1不错的概述differen t实现同样的事物的方法 –

Bravo！好样的！好样的！非常感谢你@dystroy，你是一个天才。我用你的第二个解决方案，它完美的作品。 – clydewinux

ID应该是唯一的。尝试使用类似

$('input[type="button"]')

来源

2012-10-26 08:08:54 Johan

一个类会更好适合国际海事组织 –

@RoryMcCrossan只要没有指定ID的容器，我会说它没有多大的区别。只是想发布一个替代方案 – Johan

你的类可以通过类，你使用,分离式ID

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

来源

2012-10-26 08:09:08

这应该工作，但我有5个按钮与循环内部的PHP文件生成相同的ID。或者是否有可能用一个数组命名一个按钮id，如button id ='button [0]'？ – clydewinux

因为它最好使用类 –

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

或者使用类称呼他们为BT dystroy提到

来源

2012-10-26 08:09:28

您可以使用CSS类名而不是id实现它如下

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

和你的按钮

<button class="fade">Button1</button> 
<button class="fade">Button2</button> 
<button class="fade">Button3</button>

来源

2012-10-26 08:16:35 Moorthy

是的，它与此一起工作，就像@dystroy所说的。 – clydewinux

如果class属性具有多个值，例如class =“class1 class2 class3”etc？谢谢 – mattpm

使用不同的ID为按钮的HTML和如下更改功能。

$（ '＃按钮1，＃按钮2，＃BUTTON3'）。点击（函数（E）{
.....

来源

2012-10-26 08:18:33 prageeth

如果使用相同的buttonid所有按钮则有是没有必要要求所有buttons..just简单地使用这个code..It看来你是在这段代码中使用动画....以及使用togglefade，而不是揭示

<script type=text/javascript> $(document).ready(function(){ $("button").click(function(){ $("#buttonid").fadein(); $("#buttonid").fadeout(); }); }); </script>

来源

2016-09-28 01:10:50 Madhi

动态像

$button[] = '#'.$buttonid;

外循环使用implode环路创建独特buttonid阵列，以这个数组转换为逗号分隔的字符串

$jsstring = implode(",",$button);

现在使用PHP通过上面的字符串作为您的js代码中的选择器，例如：

$(document).ready(function() { 
    $('< php echo $jsstring ; ?>').click(function(){ }); 
});

来源

2017-09-01 09:07:34

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

回答

相关问题