1

この jQuery コードは、div 内の特定のページを読み込みます (これは機能します)。

    <script type="text/javascript">
        $(document).ready(function() {

            $("#button2").on("click", function(){  
                $("#loader").load($("#button2").attr("page"));
                return false;
            });
        });
    </script>

また、divにロードされるhtmlファイルを示す属性「ページ」を持つ2つのリンクがあります。

<li><a href="#" title="" id="button2" page="page1.html">Link 1</a></li>
<li><a href="#" title="" id="button2" page="page2.html">Link 2</a></li>

これは、ページが読み込まれる div です。

<div id="loader"></div>

問題は、最初のリンクをクリックしたときに「page1.html」しかロードされないことです。2 番目のリンクをクリックすると、「page2.html」が読み込まれません。

繰り返しのリンク「button2」のid属性の問題ではないかと思います。

私は何を間違っていますか？

ありがとうございました！

4

2 に答える 2

3

要素に同じ ID を使用してはなりません。各 id 属性は一意である必要があります ( HTML4.01およびHTML5仕様に従って)。

代わりに、次のようにクラスを使用してこれらのボタンを識別した方がよいでしょう。

<script type="text/javascript">
    $(document).ready(function() {

        $(".buttons").on("click", function(){  
            $("#loader").load($(this).attr("page"));
            return false;
        });
    });
</script>

およびボタンの HTML:

<li><a href="#" title="" class="buttons" page="page1.html">Link 1</a></li>
<li><a href="#" title="" class="buttons" page="page2.html">Link 2</a></li>
于 2013-10-09T16:58:21.887 に答える
1

「私は何を間違っていますか？」

HTML で禁止されている重複した ID を使用しています。代わりに、クラス名または要素セレクターを使用してください。次の方法で、イベント ハンドラー内で現在クリックされているボタンを参照できます$(this)。

<li><a href="#" title="" class="button" page="page1.html">Link 1</a></li>
<li><a href="#" title="" class="button" page="page2.html">Link 2</a></li>

$(".button2").on("click", function(){  
    $("#loader").load($(this).attr("page"));
    return false;
});
于 2013-10-09T16:57:51.770 に答える