Javascript jquery仅打开第一个按钮_Javascript_Jquery

Javascript jquery仅打开第一个按钮

javascript jquery

Javascript jquery仅打开第一个按钮,javascript,jquery,Javascript,Jquery,这是我打开弹出窗口的代码，该窗口的类名类似于我的输入值。它适用于我在html中的第一部分（PASS是我的html ocde中的第一部分），但不适用于其他部分。有什么问题？ </div> </div>  <div id="modal" c

这是我打开弹出窗口的代码，该窗口的类名类似于我的输入值。它适用于我在html中的第一部分（PASS是我的html ocde中的第一部分），但不适用于其他部分。有什么问题？

                </div>
            </div>  
<!---------------- POLL BUTTON DIV(POP-UP)---------------------->
            <div id="modal"  class="poll">
                <div id="content">

                </div>
            </div>  
<!---------------- PASS BUTTON DIV(POP-UP)---------------------->
            <div id="modal"  class="pass">
                <div id="content">

                </div>
            </div>  
    <script type="text/javascript">
        $(document).ready(function() {
            $('#link').click(function(e) { // Button which will activate our modal
            var block = $(this +":input").val();
                $('.'+block).reveal({ // The item which will be opened with reveal
                    animation: 'fade',                   // fade, fadeAndPop, none
                    animationspeed: 600,                       // how fast animtions are
                    closeonbackgroundclick: true,              // if you click background will modal close?
                    dismissmodalclass: 'close'    // the class of a button or element that will close an open modal
                });
            return false;
            });
        });
    </script>


$（文档）.ready（函数（）{
$（'#link'）。单击（函数（e）{//按钮，该按钮将激活我们的模式
var block=$（this+“：input”）.val（）；
$（'..+block）.reveal（{//将使用reveal打开的项目
动画：“fade'，//fade，fadeAndPop，无
动画速度：600，//动画有多快
closeonbackgroundclick:true，//如果单击background将关闭吗？
dismissmodalclass:'close'//将关闭打开模式的按钮或元素的类
});
返回false；
});
});

在这些属性上切换

类

和

id

属性，然后在jQuery中调用类，而不是id

                </div>
            </div>  
<!---------------- POLL BUTTON DIV(POP-UP)---------------------->
            <div id="modal"  class="poll">
                <div id="content">

                </div>
            </div>  
<!---------------- PASS BUTTON DIV(POP-UP)---------------------->
            <div id="modal"  class="pass">
                <div id="content">

                </div>
            </div>  
    <script type="text/javascript">
        $(document).ready(function() {
            $('#link').click(function(e) { // Button which will activate our modal
            var block = $(this +":input").val();
                $('.'+block).reveal({ // The item which will be opened with reveal
                    animation: 'fade',                   // fade, fadeAndPop, none
                    animationspeed: 600,                       // how fast animtions are
                    closeonbackgroundclick: true,              // if you click background will modal close?
                    dismissmodalclass: 'close'    // the class of a button or element that will close an open modal
                });
            return false;
            });
        });
    </script>

当遍历DOM时，ID将只被引用一次。之后，它停止搜索

                </div>
            </div>  
<!---------------- POLL BUTTON DIV(POP-UP)---------------------->
            <div id="modal"  class="poll">
                <div id="content">

                </div>
            </div>  
<!---------------- PASS BUTTON DIV(POP-UP)---------------------->
            <div id="modal"  class="pass">
                <div id="content">

                </div>
            </div>  
    <script type="text/javascript">
        $(document).ready(function() {
            $('#link').click(function(e) { // Button which will activate our modal
            var block = $(this +":input").val();
                $('.'+block).reveal({ // The item which will be opened with reveal
                    animation: 'fade',                   // fade, fadeAndPop, none
                    animationspeed: 600,                       // how fast animtions are
                    closeonbackgroundclick: true,              // if you click background will modal close?
                    dismissmodalclass: 'close'    // the class of a button or element that will close an open modal
                });
            return false;
            });
        });
    </script>

以下是使用HTML构建结构的正确方法：

</div> </div>  <div id="modal" class="poll"> <div id="content"> </div> </div>  <div id="modal" class="pass"> <div id="content"> </div> </div> <script type="text/javascript"> $(document).ready(function() { $('#link').click(function(e) { // Button which will activate our modal var block = $(this +":input").val(); $('.'+block).reveal({ // The item which will be opened with reveal animation: 'fade', // fade, fadeAndPop, none animationspeed: 600, // how fast animtions are closeonbackgroundclick: true, // if you click background will modal close? dismissmodalclass: 'close' // the class of a button or element that will close an open modal }); return false; }); }); </script>

<div id="poll" class="modal"> <div class="content"> </div> </div> <div id="pass" class="modal"> <div class="content"> </div> </div>

$('.modal').click()
举个例子

</div> </div>  <div id="modal" class="poll"> <div id="content"> </div> </div>  <div id="modal" class="pass"> <div id="content"> </div> </div> <script type="text/javascript"> $(document).ready(function() { $('#link').click(function(e) { // Button which will activate our modal var block = $(this +":input").val(); $('.'+block).reveal({ // The item which will be opened with reveal animation: 'fade', // fade, fadeAndPop, none animationspeed: 600, // how fast animtions are closeonbackgroundclick: true, // if you click background will modal close? dismissmodalclass: 'close' // the class of a button or element that will close an open modal }); return false; }); }); </script>
以下是您将在jQuery中调用的内容：

</div> </div>  <div id="modal" class="poll"> <div id="content"> </div> </div>  <div id="modal" class="pass"> <div id="content"> </div> </div> <script type="text/javascript"> $(document).ready(function() { $('#link').click(function(e) { // Button which will activate our modal var block = $(this +":input").val(); $('.'+block).reveal({ // The item which will be opened with reveal animation: 'fade', // fade, fadeAndPop, none animationspeed: 600, // how fast animtions are closeonbackgroundclick: true, // if you click background will modal close? dismissmodalclass: 'close' // the class of a button or element that will close an open modal }); return false; }); }); </script>

<div id="poll" class="modal"> <div class="content"> </div> </div> <div id="pass" class="modal"> <div class="content"> </div> </div>

$('.modal').click()

这将替换您的
$（'#link'）。单击（）
我甚至不确定这是如何工作的，因为您正在将DOM元素强制为字符串并向其附加jQuery psuedo选择器。。。？请在please.ID中提供一个工作示例，该示例必须是唯一的。使用类形成多个元素。
</div> </div>  <div id="modal" class="poll"> <div id="content"> </div> </div>  <div id="modal" class="pass"> <div id="content"> </div> </div> <script type="text/javascript"> $(document).ready(function() { $('#link').click(function(e) { // Button which will activate our modal var block = $(this +":input").val(); $('.'+block).reveal({ // The item which will be opened with reveal animation: 'fade', // fade, fadeAndPop, none animationspeed: 600, // how fast animtions are closeonbackgroundclick: true, // if you click background will modal close? dismissmodalclass: 'close' // the class of a button or element that will close an open modal }); return false; }); }); </script>