0

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

链接最终看起来像

<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（比如 article1、article2 等）创建一个通用的 jQuery 函数。

我已经接受了大约 20 分钟的 jQuery 培训，所以我一直在摸索着看哪里。

谢谢。

4

1 回答 1

4

这适用于列表中的第一篇文章 - 对话框打开，但其他文章在单独的页面中打开。我假设这是因为 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()
于 2012-08-15T15:47:08.453 回答