我如何傳遞一個id到jquery中的函數？

以下代碼允許用戶點擊閃卡的問題並顯示答案。我如何傳遞一個id到jquery中的函數？

問題是它顯示所有的flashcards的所有答案。

如何傳遞每個flashcard的id，以便用戶可以單擊標題並將問題打開和關閉？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
     <script type="text/javascript" 
     src="http://www.google.com/jsapi"></script> 
     <script type="text/javascript"> 
      google.load("jquery", "1.4.0"); 
      google.setOnLoadCallback(function() { 
       $("div > div.answer").hide(); 

       $("div > div.question").click(function() { 
       $("div > div.answer").fadeIn("slow"); 
       }); 
      }); 
     </script> 
     <style> 
      div.flashcard { 
       margin: 0 10px 10px 0; 
      } 
      div.flashcard div.question { 
       background-color:#ddd; 
       width: 400px;   
       padding: 5px;  
      } 
      div.flashcard div.answer { 
       background-color:#eee; 
       width: 400px; 
       padding: 5px;    
      } 
     </style> 
    </head> 

<body> 
    <div id="1" class="flashcard"> 
    <div class="question">Who was Wagner?</div> 
    <div class="answer">German composer, conductor, theatre director and essayist, primarily known for his operas (or "music dramas", as they were later called). Unlike most other opera composers, Wagner wrote both the music and libretto for every one of his works.</div> 
    </div> 

    <div id="2" class="flashcard"> 
    <div class="question">Who was Thalberg?</div> 
    <div class="answer">a composer and one of the most distinguished virtuoso pianists of the 19th century.</div> 
    </div> 
</body> 
</html>

來源

2010-01-27 Edward Tanguay

您不需要傳入ID。只需點擊div就可以遍歷你想要的答案。 this指的是事件的來源，在這種情況下，它將是一個帶有「問題」類的div。

$("div.question").click(function() { 
    $(this).next().fadeIn("slow"); 
});

此外，假設您的標記是準確的這個可以簡化爲：

$("div > div.answer").hide();

簡單

$("div.answer").hide();

，但我真的與CSS做到這一點：

div.answer { display: none; }

所以沒有Javascript需要在頁面加載時執行。根據我的經驗，當您像使用Google AJAX Libraries API一樣使用jQuery的異步加載時，頁面將呈現，然後您的flashcard答案將明顯消失。這往往是不可取的。只需使用CSS來隱藏它們。

此外，jQuery是一天或兩天前直到版本1.4.1。

來源

2010-01-27 06:24:28 cletus

我相信應該是$（this）.next（）。 – 2010-01-27 06:27:48

@Dave：呃......很久以前就修好了。 :)你需要刷新更多。 :) – cletus 2010-01-27 06:33:59

+1，當評論是錯誤的，但現在很好:) – CMS 2010-01-27 06:34:44

由於兩個div都是兄弟姐妹，你可以使用next方法來獲得下一個div.answer元素：

$("div > div.question").click(function() { 
    $(this).next("div.answer").fadeIn("slow"); 
});

檢查爲例here。

來源

2010-01-27 06:26:14 CMS

當您進入活動時，您需要引用this關鍵字，以便您處於正確的上下文中。否則，您正在全球範圍內選擇，而不是專門選擇。

google.load("jquery", "1.4.0"); 
google.setOnLoadCallback(function() { 
    $("div.flashcard div.answer").hide(); 

    $("div.flashcard div.question").click(function() { 
     $(this).next('div.answer').fadeIn("slow"); 
    }); 
});

來源

2010-01-27 06:27:39

這應該是你正在尋找的代碼。我測試過，它正在工作。

<script type="text/javascript"> 
     google.load("jquery", "1.4.0"); 
     google.setOnLoadCallback(function() { 
      $("div > div.answer").hide(); 

      $("div > div.question").click(function() { 

      if($(this).siblings('.answer').css('display') == 'none') 
       $(this).siblings('.answer').fadeIn("slow"); 
      else 
       $(this).siblings('.answer').fadeOut("slow"); 
      }); 
     }); 
</script>

來源

2010-01-27 06:43:19 poh

我如何傳遞一個id到jquery中的函數？

回答

相關問題