0

我在 jQuery 中认为应该是一个简单的同级选择器时遇到了一些问题。

该问题不会产生错误消息，当然，它只是无法正确选择。在文档（就绪）函数（）中，我有以下简单的代码来首先隐藏所有弹出窗口，然后等待一个人单击将显示同级弹出窗口的图像：

//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 回答