我在使用多个ID的jQuery模态时遇到麻烦 [英] I am having trouble with jquery modal with multiple id's

问题描述

我对jQuery完全陌生，我从jquery库获得以下脚本.在单个页面上，我有多个链接，当用户单击该链接时，会弹出对话框消息.到目前为止，这是我的代码.我的问题是，如果我在一个页面上有大约30个链接，应该用不同的ID一遍又一遍地创建一个新的jquery函数吗?如何?

I am completely new to jQuery and I have the following script from jquery library. On a single page i have multiple link that when user clicks on it, a dialogue message pops up. So far this is my code. My question is what if I have about 30 links on a single page, should i create a new jquery function over and over again with different ids? How?

<script>
         $(function() {
        $( "#dialog1" ).dialog({
        autoOpen: false,
        show: {
        effect: "blind",
        duration: 1000
        },
        hide: {
        effect: "explode",
        duration: 1000
        }
        });
        $( "#opener1" ).click(function() {
        $( "#dialog1" ).dialog( "open" );
        });
        });

         $(function() {
        $( "#dialog2" ).dialog({
        autoOpen: false,
        show: {
        effect: "blind",
        duration: 1000
        },
        hide: {
        effect: "explode",
        duration: 1000
        }
        });
        $( "#opener2" ).click(function() {
        $( "#dialog2" ).dialog( "open" );
        });
        });
    </script>

我也有以下html

<div title="click to view details">
                <a href="#" class="p1" rel="nofollow" aria-haspopup="false" id="opener1"></a>
                    <p id="dialog1">
                        <strong>Monkey</strong>Monkeys are generally considered to be intelligent. Unlike apes, monkeys usually have tails.
                    </p>
                        <b class="b1"></b>
            </div>
            <div title="click to view details">
                <a href="#" class="p2" rel="nofollow" aria-haspopup="false" id="opener2"></a>
                    <p id="dialog2">
                        <strong>Vulture</strong>A particular characteristic of many vultures is a bald head, devoid of normal feathers.
                    </p>
                        <b class="b2"></b>
            </div>

推荐答案

您至少有2种方法可以完成此任务. 最好的方法是使用类，因此您要在要管理的链接上使用相同的类，然后使用每个函数.我不认为这对您来说是最好的解决方案，但这只是说在某些情况下您也可以使用此解决方案.

You have at least 2 ways to accomplish this task. Probably the best is to use classes, so you use the same class on links you want to manage, and then you use the class selector to bind actions to them. Another way could be the use of the each function on the a tag. I don't think that in your case this is the best solution, but it's just to say that in some circumstances you can use this solution, too.

这篇关于我在使用多个ID的jQuery模态时遇到麻烦的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！