我無法用下面的代碼來選擇前一個元素

Question

林

<script src="http://code.jquery.com/jquery-latest.js"></script> 
<script> 
//Document ready 
$(document).ready(function(){ 

    //Show info 
    $('a.getinfo').live("click", function(event){ 
     event.preventDefault(); 
       $(this).css("display","none"); 
       $(this).next('.info').css("display","block"); 
     } 
    ); 
    $('a.getback').live("click", function(event){ 
     event.preventDefault(); 
       $(this).css("display","none"); 
       $(this).prev('a.getinfo').css("display","block"); 
     } 
    ); 



}); 
</script> 
<style> 
.info { 
    display: none 
} 
</style> 
<ul> 
    <li> 
     <a href="#" class="getinfo"> 
      <img src="http://s13.postimage.org/7xkjh8991/image.jpg"> 
      <span class="sticker opacity">get info</span> 
     </a> 
     <div class="info"> 
     <a href="#" class="getback"> 
      some info 
      <span class="sticker-back opacity">back</span> 
     </a> 
     </div> 
    </li> 
    <li> 
     <a href="#" class="getinfo"> 
      <img src="http://s13.postimage.org/7xkjh8991/image.jpg"> 
      <span class="sticker opacity">get info</span> 
     </a> 
     <div class="info"> 
     <a href="#" class="getback"> 
      some info 
      <span class="sticker-back opacity">back</span> 
     </a> 
     </div> 
    </li> 
    <li> 
     <a href="#" class="getinfo"> 
      <img src="http://s13.postimage.org/7xkjh8991/image.jpg"> 
      <span class="sticker opacity">get info</span> 
     </a> 
     <div class="info"> 
     <a href="#" class="getback"> 
      some info 
      <span class="sticker-back opacity">back</span> 
     </a> 
     </div> 
    </li> 
</ul> 

它應該做的：

• 當你點擊圖像，圖像LL隱藏和LL顯示文本「一些信息返回「。現在
• 當我在文本中單擊「一些信息回」，我應該得到一張圖像

問題：

• 我不能顯示圖像。也許是我不知道如何正確的選擇類的.getinfo「

Answer 1

你是不是在做正確的選擇。這裏是你的代碼的修改版本正常工作：http://jsfiddle.net/ertaD/4/

我修改了選擇以獲得最接近的li和inthat李我發現了所需的元素。 你.getback躲藏，並顯示.INFO回（信息的內容仍然隱藏）

下面是代碼：

$('a.getinfo').live("click", function(event){ 
    event.preventDefault(); 
      $(this).css("display","none"); 
      $(this).closest('li').find('.info').css("display","block"); 
    } 
); 
$('a.getback').live("click", function(event){ 
    event.preventDefault(); 
      $(this).parent().css("display","none");  
      $(this).closest('li').find('.getinfo').css("display","block"); 
    } 
); 

Answer 2

不要使用Prev選擇，因爲它不會在所有以前的div搜索。嘗試parent和children選擇：

$('a.getinfo').live("click", function(event){ 
    event.preventDefault(); 
      $(this).hide(); 
      $(this).parent().children('.info').show(); 
    } 
); 
$('a.getback').live("click", function(event){ 
    event.preventDefault(); 
      $(this).parent().hide(); 
      $(this).parent().parent().children('.getinfo').show(); 
    } 
);​ 

注意我也用了Show和Hide方法，使東西比設定更簡單的CSS屬性

Here is a working example

---

由於我缺少需要雙親使用.parent().parent()，在此ins中使用closest選擇器會更合適，孟清湘查找匹配指定選擇查詢的第一個父，是這樣的：

$(this).closest("li").children('.getinfo').show();