如何将id传递给jquery中的函数？

Question

以下代码允许用户单击闪存卡的问题并显示答案。

问题是它显示所有闪存卡的所有答案。

如何传递每个闪卡的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>

Answer 1

您无需传入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时，页面将呈现，然后您的闪卡答案将明显消失。 这往往是不合需要的。 只需使用CSS来隐藏它们。

此外，jQuery是一两天前的1.4.1版本。

Answer 2

由于这两个div是兄弟，你可以使用next方法来获取下一个div.answer元素：

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

点击这里查看示例。

Answer 3

当您进入事件时，您需要引用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");
    });
});

Answer 4

这应该是您正在寻找的代码。 我测试过，它正在工作。

<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>

如何将id传递给jquery中的函数？

问题描述

4 个解决方案

解决方案1
6 已采纳 2010-01-27 06:24:28

解决方案2
3 2010-01-27 06:26:14

解决方案3
0 2010-01-27 06:27:39

解决方案4
0 2010-01-27 06:43:19

如何将id传递给jquery中的函数？

问题描述

4 个解决方案

解决方案1 6 已采纳 2010-01-27 06:24:28

解决方案2 3 2010-01-27 06:26:14

解决方案3 0 2010-01-27 06:27:39

解决方案4 0 2010-01-27 06:43:19

解决方案1
6 已采纳 2010-01-27 06:24:28

解决方案2
3 2010-01-27 06:26:14

解决方案3
0 2010-01-27 06:27:39

解决方案4
0 2010-01-27 06:43:19