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'的按钮时，将执行上述代码。现在我有多个按钮，如何在所有按钮中调用此功能？我尝试将所有按钮的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);

第二个解决方案：

给一个班级＆＃34; someClass＆＃34;所有涉及的按钮

<input type=button class=someClass ...

并做

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

第三个解决方案：

使用逗号分隔ID：

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

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

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

Answer 2

为按钮使用不同的ID并更改您的功能，如下所示。

$（'＃button1，＃button2，＃button3'）。click（function（e）{
.....

Answer 3

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

之类的东西

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

Answer 4

您的班级可以使用,分隔ID

按类调用它们

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

Answer 5

<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

Answer 6

您可以使用 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>

和你的html按钮

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

Answer 7

如果你对所有按钮都使用相同的buttonid，则无需调用所有按钮..只需使用此代码..似乎你在这段代码中使用动画....好用 togglefade < / strong>而不是透露

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

Answer 8

在循环中动态创建一个唯一buttonid的数组，如

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

在循环外部使用implode将此数组转换为逗号分隔的字符串

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

现在使用php在js代码中将上面的字符串作为选择器传递，如：

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

Answer 9

要使用以下代码中更简单的方法：

方法1：

<script>
    $(document).ready(function () {
        $('input:button[name="button1"],[name="button2"]').click(
            function () {
                alert('test')
            });
    });
</script>
<input type="button" id="button1" name="button1" value="Filter" />
<input type="button" id="button2" name="button2" value="Filter" />

方法2：

<script>
    $(document).ready(function () {
        $('button[id="button1"],[id="button2"]').click(
            function () {
                alert('te2222st')
            });
    });
</script>
<button id="button1" >bbbbb</button>
<button id="button2" >bbbbb</button>

Answer 10

我有解决此问题的方法

subchapter = subChapter.query.first()
subchapter.mainChapter.id # Returns the chapter ID
subchapter.mainChapter.mainArticle.id # Returns the article ID

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

10 个答案: