Как я могу передать идентификатор функции в jquery? - PullRequest
Новая
       17

Как я могу передать идентификатор функции в jquery?

3 голосов
/ 27 января 2010

Следующий код позволяет пользователю нажать на вопрос о карточке, и он отображает ответ.

Проблема в том, что он отображает все ответы на все карточки.

Как передать идентификатор каждой карточки, чтобы пользователь мог щелкнуть заголовок и переключить вопрос в открытый и закрытый вопрос? 

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

Ответы [ 4 ]

6 голосов
/ 27 января 2010

Вам не нужно передавать в ID. Просто перейдите от div нажмите на ответ, который вы хотите. this относится к источнику события, который в этом случае будет div с классом «question». 

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

Кроме того, если ваша разметка точна, это можно упростить: 

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

просто 

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

но я бы сделал это с помощью CSS: 

div.answer { display: none; }

, поэтому не нужно выполнять Javascript при загрузке страницы. По моему опыту, при использовании асинхронной загрузки jQuery с API библиотек Google AJAX, как и у вас, страница будет отображаться, а затем ваши ответы с помощью флэш-карты заметно исчезнут. Это имеет тенденцию быть нежелательным. Просто используйте CSS, чтобы скрыть их.

Кроме того, jQuery по состоянию на день или два назад до версии 1.4.1.

3 голосов
/ 27 января 2010

Так как два div - это братья и сестры, вы можете использовать метод next для получения следующего элемента div.answer: 

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

Проверьте пример здесь .

0 голосов
/ 27 января 2010

Это должен быть код, который вы ищете. Я проверил, и он работает. 

<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 голосов
/ 27 января 2010

Когда вы находитесь внутри события, вам нужно ссылаться на ключевое слово 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");
    });
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...