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 関数を作成する方法です。

私は jQuery で約 20 分間のトレーニングを行ったので、暗闇の中でどこを見ればよいかを撮影しています。

ありがとう。

4

1 に答える 1

4

これは、リストの最初の記事で機能します。ダイアログは開きますが、それ以外の記事は別のページで開きます。これは、IDが一意ではないためだと思います。

そうです、同じ ID を持つ 2 つ以上の要素を持つことは無効な 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 に答える