为什么这个“这个+兄弟姐妹”的呼叫失败？

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();