0

jQueryの単純な兄弟セレクターであると思っていたものに問題があります。

この問題でエラー メッセージが生成されることはありません。もちろん、適切に選択できないだけです。document(ready) function() 内に、最初にすべてのポップアップを非表示にする次の簡単なコードがあります。次に、兄弟のポップアップを表示する画像をクリックするのを待ちます。

//hide all the charm pop ups
$(".charm_pop").hide();
$(".charm > img").click(function() {
    $("this + .charm_pop").show();
})

私の HTML は Djangoforループによって生成されているため、この単純な画像/ポップアップ コンボ マークアップが何度も繰り返されます。

{% for ch in charms %}
    <div class="charm">
        <img src="{{ MEDIA_URL }}images/charms/{{ ch.image }}" alt="{{ ch.name }}" />
        <div class="charm_pop">
             <p id="charm_name">{{ ch.name }}</p>
         <p id="charm_desc">{{ ch.description }}</p>
         <p id="charm_price">${{ ch.price }}</p>
         <form method="post" action="." class="cart">{% csrf_token %}
               <p>**some inputs and what not</p>
         </form>
        </div>
    </div>
{% endfor %}

ご覧のとおり、画像がクリックされるのを待つだけです。クリックされたら兄弟を選択し、対応するポップアップを表示します。しかし、画像をクリックしても何も起こりません。置き換える$("this + .charm_pop").show();$(".charm_pop").show();、実際にすべてのポップアップが表示されるため、クリック機能は機能していますが、セレクターは不安定です。

thisこのコンテキストで がどのように機能するかを誤解していますか?

4

3 に答える 3

7

jQuery セレクターを記述する場合、文字列"this"は単に「HTML 要素<this>」を意味するため、$("this + .charm_pop")確実に機能しません。

ここでは、オブジェクトの文字列表現を他の何かと連結することも意味がないため、機能し$(this + " .charm_pop")ません。

代わりに、次から始まる適切なトラバーサル関数を使用する必要があります$(this)

$(this).next(".charm_pop").show();

クリックされた画像からその兄弟に移動するにはさまざまな方法があり.charm_popますが、利用しようとして.next()いる隣接する兄弟セレクターと最も高速で、意味的にも同じです。+

于 2013-04-09T15:26:41.383 に答える
4

コードは基本的に + css セレクターを使用しています

$("this + .charm_pop").show();

element+.classこれは、「要素の直後に配置されたすべての .class 要素を選択し ます

あなたの場合、という名前の要素を探していますthis。のタグ名を持つ要素があるとは思えません<this>

あなたのコードは

$(this).siblings(".charm_pop").show();

また

$(this).next(".charm_pop").show();
于 2013-04-09T15:26:40.640 に答える
1

あなたはこれを行うことができます :

$(this).find(".charm_pop").show();
于 2013-04-09T15:27:22.980 に答える