Question

我根据数据库中的内容动态生成链接。

链接最终看起来像

<ul>
    <li><a href="/Updates/LoadArticle?NewsId=3" id="article">Article 3</a></li>
    <li><a href="/Updates/LoadArticle?NewsId=2" id="article">Article 2</a></li>
    <li><a href="/Updates/LoadArticle?NewsId=1" id="article">Article 1</a></li>
</ul>

我拼凑的脚本是

$(document).ready(function () {

        $("#article").click(function (e) {
            InitializeDialog($("#news"), $(this).attr("href"));
            e.preventDefault();
            $("#news").dialog("open");
         });


        //Method to Initialize the DialogBox
        function InitializeDialog($element, page) {

            $element.dialog({
                                autoOpen: true,
                                width: 400,
                                resizable: false,
                                draggable: true,
                                title: "Update",
                                modal: true,
                                show: 'fold',
                                closeText: 'x',
                                dialogClass: 'alert',
                                closeOnEscape: true,
                                position: "center",
                                open: function (event, ui) {
                                    $element.load(page);
                                },

                                close: function () { 
                                    $(this).dialog('close');
                                }
              });
        }
    });

这适用于列表中的第一篇文章 - 对话框打开，但其他文章在单独的页面中打开。我假设这是因为id不是唯一的。

我的问题更多是如何为任何id创建一个通用的jQuery函数（比如，article1，article2等）。

我在jQuery上进行了大约20分钟的训练，所以我在黑暗中拍摄的地方。

感谢。

Answer 1

这适用于列表中的第一篇文章 - 对话框打开，但是其他文章在单独的页面中打开。我假设这是因为id不是唯一的。

你是对的，拥有2个或更多具有相同ID的元素是无效的HTML，会导致各种各样的问题。

删除id属性并改为使用class属性：

<ul>
    <li><a href="/Updates/LoadArticle?NewsId=3" class="article">Article 3</a></li>
    <li><a href="/Updates/LoadArticle?NewsId=2" class="article">Article 2</a></li>
    <li><a href="/Updates/LoadArticle?NewsId=1" class="article">Article 1</a></li>
</ul>

然后代替：

$("#article").click()

使用：

$(".article").click()

使用动态链接打开jQuery UI对话框

1 个答案: