如何在jQuery中将id传递给函数？

Question

如何在jQuery中将id传递给函数？

3

以下代码允许用户单击flashcard的问题，然后显示答案。

问题是它会显示所有flashcard的答案。

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

- Edward Tanguay

4个回答

3

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

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

Check an example here.

- Christian C. Salvadó

0

当你在事件内部时，需要引用 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");
    });
});

- Dominic Barnes

0

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

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

- poh

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- cletus · Accepted Answer

您不需要传入ID。只需从单击的div遍历到所需的答案即可。this指的是事件源，这在本例中将是一个类名为"question"的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版本。