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");
});

查看示例here。

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 个答案: