1

jQuery を使用して div 内のコンテンツを変更する 3 つのボタンを作成しようとしています。

このコードの何が問題なのかわかりません。

<head>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

</head>

<body>
    <script type="text/javascript">
    var buttons = $("#buttons").find("a");
        $("buttons").click(function() {
           var id = $(this).attribute("id");
           $("pages id").css("display", "none");
           $("pages id:eq("+id+")").css("display", "block");
    });
    </script>​​​​

    <div id="buttons">
         <a href="#" id="0" class="mybutton myred">Div 1</a>
         <a href="#" id="1" class="mybutton myblue">Div 2</a>
         <a href="#" id="2" class="mybutton myblue">Div 3</a>
    </div>

    <div id="pages">
        <div id="1" class="mydivshow">1111</div>
        <div id="2" class="mydivhide">2222</div>
        <div id="3" class="mydivhide">3333</div>
    </div>
</body>

4

4 に答える 4

8

解決する必要のある誤解がいくつかあるようです。明らかに正しい方向に進んでいることを心配しないでください。

まず、このようにdocument.readyイベント内で呼び出しをラップする必要があります。

<script type="text/javascript">
$(document).ready(function() {
    var buttons = $("#buttons").find("a");
        $("buttons").click(function() {
           var id = $(this).attr("id");
           $("pages id").css("display", "none");
           $("pages id:eq("+id+")").css("display", "block");
    });
});
</script>​​​​

これは、HTMLが順番にレンダリングされる、つまり1行ずつ読み取るためです。javascriptコードが実行されるとき、ボタンのHTMLはまだレンダリングされていないため、何について話しているのかわかりません。また、readyイベントハンドラーは、クリックイベントハンドラーとほぼ同じように構成されていることに注意してください。別のオブジェクトを操作し、別のイベントを使用しているだけです。

次の問題は、セレクターの動作に苦労しているように見えることです。

var buttons = $("#buttons").find("a");

ここでは実際に2つのセレクターを使用しています。$（）と.find（）は、ほぼ同じことを行います。ただし、jQueryオブジェクトセレクターはドキュメント全体のクエリに使用され、findはサブセットのクエリに使用されます。したがって、あなたがやろうとしていることには、これがより適切でしょう：

var buttons = $("a");

これは単に「すべてのアンカータグを選択する」という意味です。セレクターが特殊文字で始まらない場合は、単にそのタイプのタグを探しています。＃文字は、idと。を使用してすべての要素を照会します。文字は、そのクラスのすべての要素を照会します。したがって、最初のステートメントは、実際には、存在しないID「buttons」を持つ要素をクエリしていました。

最後に、簡単にするために、作成しようとしている変数を作成する必要はありません。その行を削除して、クリックハンドラーに移動します。

<script type="text/javascript">
$(document).ready(function() {
    $("a").click(function() {
       var id = $(this).attribute("id");
       $("pages id").css("display", "none");
       $("pages id:eq("+id+")").css("display", "block");
    });
});
</script>​​​​

次の問題は、ID属性をデータフィールドとして使用していることです。これをしないでください。要素に関する情報をそのタグ内に格納する必要がある場合は、接頭辞「data-」で始まるカスタム属性を使用します。したがって、この場合は、アンカータグを変更してみましょう。

<div id="buttons">
     <a href="#" data-id="0" class="mybutton myred">Div 1</a>
     <a href="#" data-id="1" class="mybutton myblue">Div 2</a>
     <a href="#" data-id="2" class="mybutton myblue">Div 3</a>
</div>

それは少し良いです。今、私たちはdivで同じ問題を抱えています。同じことを行うこともできますが、この情報をクエリし、クラスでセレクターを使用する方がはるかに簡単なので、idに従ってdivクラスを指定しましょう。

<div id="pages">
    <div class="mydivshow div1">1111</div>
    <div class="mydivhide div2">2222</div>
    <div class="mydivhide div3">3333</div>
</div>

これで、jQueryに戻ってコードを変更できます。

<script type="text/javascript">
$(document).ready(function() {
    $("a").click(function() {
       var id = $(this).attribute("data-id"); // Using a custom attribute.
       $("#pages div").hide(); // gather all the div tags under the element with the id pages and hide them.
       $(".div" + id).show(); // Show the div with the class of .divX where X is the number stored in the data-id of the object that was clicked.
    });
});
</script>​​​​

そしてそれはそれをするべきです！

于 2012-09-14T00:23:23.253 に答える
4

コードに複数のエラーがあります。修正されたバージョンは次のようになります。

デモ: http://jsfiddle.net/SO_AMK/BcFVv/

jQuery:

$("#buttons a").click(function() {
    var id = $(this).attr("id");
    $("#pages div").css("display", "none");
    $("#pages div#" + id + "").css("display", "block");
});​

HTML:

<div id="buttons">
    <a href="#" id="1" class="mybutton myred">Div 1</a>
    <a href="#" id="2" class="mybutton myblue">Div 2</a>
    <a href="#" id="3" class="mybutton myblue">Div 3</a>
</div>
<div id="pages">
    <div id="1" class="mydivshow">1111</div>
    <div id="2" class="mydivhide">2222</div>
    <div id="3" class="mydivhide">3333</div>
</div>

</p>

于 2012-09-14T00:04:58.510 に答える
3

コードを document.ready 関数内にラップする必要があります。そして、属性関数のようなものはありません。それは attr() です。また、Id であるページを選択しています。div を参照した後に # 記号と Id が必要ですが、そうしないと、jquery は存在しない id という名前の HTML 要素を探します。

すべての CSS コードの代わりに、jquery の非表示/表示機能を利用することもできます。

ここで作業フィドルを参照してください

 var buttons = $("#buttons a");

    buttons.click(function(){
            var id = $(this).attr("id");
                $("#pages div").hide();
                $("#pages div:eq("+id+")").show();
        });
于 2012-09-14T00:04:11.773 に答える
1

あなたが呼んでいる - それはもちろん存在しない$("buttons")という名前のタグを見つけようとしています。<buttons>リンク配列はすでに事前に計算されているので、次のように呼び出すだけです。

buttons.click(function() { ...
于 2012-09-14T00:05:19.773 に答える