All geek questions in one place

How to pass id of function in jquery?

The following code allows the user to click on a flash card question and display the answer.

The problem is displaying all the answers for all cards.

How can I pass the identifier of each flash card so that the user can click on the title and switch the question open and closed?

<!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>
+3
source share
4 answers

You do not need to pass an identifier. Just go from the div by clicking on the answer you want. thisrefers to the source of the event, which in this case will be a div with the class "question".

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

Also, if your markup is correct, this can be simplified:

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

simply

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

but I would do it with CSS:

div.answer { display: none; }

Javascript . jQuery API- API AJAX Google, , , - . , , . CSS, .

, jQuery 1.4.1.

+6

div , next, div.answer:

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

.

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

Source: https://habr.com/ru/post/1730160/

More articles:


All Articles