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()最快，并且在语义上与您的邻近兄弟选择器+相同正试图利用。

Answer 2

您的代码基本上使用+ css选择器

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

element+.class，其中说“选择元素之后立即放置的所有.class元素

在您的情况下，它正在寻找名为this的元素。我怀疑你有任何标签名为<this>的元素。

您的代码需要

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

或

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

Answer 3

你可以这样做：

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

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

3 个答案: