20

我对 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>

上面的代码在单击带有 an 的按钮时执行id='button'。现在我有多个按钮，如何在所有按钮中调用此功能？我尝试将id所有按钮设置为button但只有第一个按钮有效。任何帮助将不胜感激。顺便说一句，在我的 .php 文件中，我有以下代码：

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

此 php 代码将显示 5 个具有相同 id 的按钮，即“按钮”。我想要发生的是，当我单击 5 个按钮中的任何一个时，jQuery 函数将执行弹出一个淡入/淡出表单。

4

10 回答 10

45

第一个解决方案：

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

第三个解决方案：

使用逗号分隔 ids ：

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

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

$(document).on('click', '.someClass', function(e) { 
...
});
于 2012-10-26T08:07:15.077 回答
1

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

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

于 2012-10-26T08:18:33.617 回答
0

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

$('input[type="button"]')
于 2012-10-26T08:08:54.007 回答
0

你的班级可以使用,单独的 id按班级呼叫他们

$(document).ready(function() {
$('#button, #button1, #button2').click(function(e) { 
$('#modal').reveal({ 
animation: 'fade',
animationspeed: 150,
closeonbackgroundclick: true, 
dismissmodalclass: 'close'
});
return false;
});
});​
于 2012-10-26T08:09:08.137 回答
0 
<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-26T08:09:28.007 回答
0

您可以使用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>
于 2012-10-26T08:16:35.710 回答
0

如果您对所有按钮使用相同的 buttonid，则无需调用所有按钮..只需使用此代码..您似乎在此代码中使用动画....使用togglefade而不是显示

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

于 2016-09-28T01:10:50.857 回答
0

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

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

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

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

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

$(document).ready(function() {
    $('< php echo $jsstring ; ?>').click(function(){ });
});
于 2017-09-01T09:07:34.817 回答
0

要使用更简单的方法，如下代码：

方法一：

<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" />

方法二：

<script>
    $(document).ready(function () {
        $('button[id="button1"],[id="button2"]').click(
            function () {
                alert('te2222st')
            });
    });
</script>
<button id="button1" >bbbbb</button>
<button id="button2" >bbbbb</button>
于 2019-03-28T09:00:01.210 回答
0

我有这个问题的解决方案

      $(document).ready(function () {
                    $("#btnSubmit,#btnSubmitbuttom").click(function () {
                        var rfp = true;
                        var count = 0;
                        var lbxBD_Role = $("#lbxBD_Role option:selected").val();
                        if (lbxBD_Role == "" || lbxBD_Role == undefined) {
                            $("#lblBD_Role").attr("style", "visibility: visible");
                            $("#lblBD_Role").attr("style", "color: red");
                            $("#lblBD_Role").html('* Required');
                            count++;
                        }
                      });
                   });
            </script>
于 2019-03-29T08:11:17.607 回答