2013-04-09 147 views
0

我遇到了一些麻煩,我認爲應該是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在這方面的工作原理嗎?

+2

'this'是一個對象,但你直接在字符串中使用它,所以反而,你的選擇是尋找一個標籤,如'' – 2013-04-09 15:25:33

+0

所以這:'$(this +「+ .charm_pop」)。show();'應該工作,否? – fildred13 2013-04-09 15:27:35

+0

否,那麼它會查找'<[object object]>' – 2013-04-09 15:28:05

回答

7

當編寫jQuery選擇字符串"this"僅僅意味着 「一個HTML元素<this>」,所以$("this + .charm_pop")將肯定是不行的。

將對象的字符串表示與其他事物連接起來在這裏也沒有意義,因此$(this + " .charm_pop")也不起作用。

您應該使用合適的穿越功能,而不是從$(this)開始:

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

有許多不同的方式從點擊的圖像被其兄弟.charm_pop去,但.next()是最快,也是語義相同到您嘗試使用的鄰居兄弟選擇器+

+0

.next()我正是我在找什麼,它已經很長時間了,因爲我已經觸及JavaScript,我忘了我必須設置上下文。感謝大家!我會盡快接受這一點,因爲它確實解決了我的問題。 – fildred13 2013-04-09 15:32:56

4

您的代碼基本上是使用+ CSS選擇

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

element+.class它說,在後元素

立即放置在你的情況「選擇所有的.class元素是尋找一個元素名爲this我懷疑你有任何元素的標籤名稱爲<this>

您的代碼需要爲

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

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

@Ejay I fixed正如你發佈的那樣。 – epascarello 2013-04-09 15:31:00

+0

(y)。刪除評論 – Ejaz 2013-04-09 15:34:35

1

你可以這樣做:

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