为什么这个"这个+兄弟姐妹"的电话失败了？

Question

我在jQuery中认为应该是一个简单的兄弟选择器时遇到了一些麻烦.

问题不会产生任何错误消息,当然,它无法正确选择.在文档(就绪)函数内部()我有以下简单的代码来首先隐藏所有的弹出窗口,然后等待一个人点击将显示兄弟弹出窗口的图像:

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

我的HTML是由Django for循环生成的,因此这个简单的图像/弹出组合标记会有很多次迭代:

{% 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在这种背景下工作？

Answer 1

在编写jQuery选择器时,字符串"this"只是意味着"一个HTML元素<this>",所以$("this + .charm_pop")肯定不会起作用.

将对象的字符串表示与其他内容连接在一起也没有意义,因此$(this + " .charm_pop")也无法工作.

您应该使用适当的遍历函数,从$(this)以下开始:

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

有许多不同的方法可以从单击的图像转移到它的兄弟.charm_pop,但是.next()最快且在语义上与+您尝试使用的相邻兄弟选择器相同.