1

箇条書きをクリックすると、その下にさらにテキストを表示したい箇条書きがあります。これらは両方とも、共通の ID を共有することによってペアになっている 2 つの別個の P です。したがって、私が以下でやろうとしているのは、(id_same_as_this.class) を持つ要素を見つけて、クラス「展開」を持つ要素と、クリックされた P に一致する ID が切り替えられるようにすることです。それは理にかなっていますか？ 

$(document).ready(function(){
    $(".expandable").click(function(){
        $(this.attr('id')+"."+"expand").toggle(800);
    });     
});

私が読んだ多くの例よりも、私の Web ページの展開可能な箇条書きのコードの使用量が大幅に少なくなるため、上記のコードが機能するかどうかだけを尋ねます。

4

4 に答える 4

4 
  $(this.attr('id')+"."+"expand").toggle(800);

でなければなりません

  $("#" + this.id +".expand").toggle(800);

あなたはそこを逃しまし#た。つまり、共通 ID を持つべきではありません。定義上、ID は一意であることを意味します。複数の要素で同じ ID を使用している場合、現在試しているブラウザーでは機能する可能性がありますが、jQuery (または Chrome、Konqueror、iOS Safari) の次のリビジョンで機能しなくなるという保証はありません。また、そうする理由もありません。クラスまたはdata-*属性を使用できます。

于 2013-07-16T18:15:40.850 に答える
1

これらは両方とも、共通の ID を共有することで対になっている 2 つの別個の P です。

ID は一意です。2 つの要素が共通の ID を共有することはできません。これは、一意の識別子を持つという目的全体を無効にするためです。JavaScript は、有効な HTML を使用していると想定するためdocument.getElementById()、一致する最初の要素のみを返しidます。一意でない ID を使用すると、予期しない方法で問題が発生し始めます。

$('#foo').find('.bar') // Won't search past first #foo
$('#foo .bar')         // Will search past first #foo in IE8+

この作業を容易にするために、HTML を再構築してみてください。多分あなたはこのようなことをすることができます:

<ul id="bullets">
    <li>
        <h2>Title</div>
        <div>Text</div>
    </li>
</ul>

次に、単純なイベント ハンドラーを使用します。

$('#bullets h2').click(function() {
    $(this).next().toggle(800);
});
于 2013-07-16T18:23:58.107 に答える
1

はい、これは機能しますが、ID の前に # が必要です

于 2013-07-16T18:18:32.490 に答える
0

これには値はまったく必要ありません（hungerpainの回答に関するコメントから、無効な複数の要素でid同じ値を使用しているため、これは良いことです）。id

これを行うだけです：

$(document).ready(function(){
    $(".expandable").click(function(){
        $(this).find(".expand").toggle(800);
    });     
});

これにより、クリックさexpandれた内のクラスを持つ要素が見つかります。expandableセレクターの不特定の動作に依存しません。

でそのデータが本当に必要な場合はexpandable、それをdata-*属性に入れます。したがって、この無効な構造の代わりに:

<!-- INVALID -->
<div id="foo27" class="expandable">
    <div class="expand">...</div>
</div>
<div id="foo27" class="expandable">
    <div class="expand">...</div>
</div>

これを行う

<!-- VALID -->
<div data-id="foo27" class="expandable">
    <div class="expand">...</div>
</div>
<div data-id="foo27" class="expandable">
    <div class="expand">...</div>
</div>

上記のコードを使用して展開を行います。値が必要な場合は、.attr("data-id")または.data("id")を使用して取得します。

于 2013-07-17T07:24:27.560 に答える