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
このコンテキストで がどのように機能するかを誤解していますか?