Как мне показать ближайший элемент абзаца с уникальной ссылкой с помощью jQuery? - PullRequest
Новая
       20

Как мне показать ближайший элемент абзаца с уникальной ссылкой с помощью jQuery?

0 голосов
/ 18 апреля 2010

Название немного ржавое, извините за это.

Теперь позвольте мне объяснить, что я пытаюсь сделать.

У меня есть несколько предметов в списке, например: 

<li>
    <a id="toggle" class="0"><h4>ämne<small>2010-04-17 kl 12:54</small></h4></a>
    <p id="meddel" class="0">text</p>
</li>

<li class='odd'>
    <a id="toggle" class="1"><h4>test<small>2010-04-17 kl 15:01</small></h4></a>
    <p id="meddel" class="1">test meddelande :) [a]http://youtube.com[/a]</p>
</li>

Функция, которую я пытаюсь выполнить, заключается в том, что когда пользователь нажимает ссылку «переключение» (текст h4), я хочу, чтобы элемент абзаца под ним постепенно исчезал. Я подумал об идее дать оба переключателя ссылка и абзац того же класса, а затем каким-то образом заставить его получить абзац с тем же классом, по которому щелкала ссылка переключения, и показать его? Но я не совсем уверен, как это сделать, и, хотя, это не самая лучшая идея, но, возможно, это единственный способ? Я не знаю ...

Есть ли способ просто получить ближайший абзац (под ссылкой) с идентификатором "meddel" и добавить его? Это звучит немного проще ...

Я надеюсь, что вы хотя бы дадите мне несколько советов. Заранее спасибо, -Nike

Ответы [ 3 ]

2 голосов
/ 18 апреля 2010 
$("h4").click(function() {
  var p = $(this).siblings("p");
  if (p.is(":hidden")) {
    p.fadeIn();
  } else {
    p.fadeOut();
  }
});

Одна проблема: у ваших якорей одинаковый идентификатор. Они не должны. Идентификаторы должны быть уникальными.

2 голосов
/ 18 апреля 2010

Ваши идентификаторы должны быть уникальными, я бы дал вашим ссылкам класс, например: 

<li>
    <a class="toggle"><h4>ämne<small>2010-04-17 kl 12:54</small></h4></a>
    <p>text</p>
</li>

<li class='odd'>
    <a class="toggle"><h4>test<small>2010-04-17 kl 15:01</small></h4></a>
    <p>test meddelande :) [a]http://youtube.com[/a]</p>
</li>

Тогда вы можете просто сделать это: 

$(function() {
  $("a.toggle").click(function() {
    $(this).next("p").animate({ opacity: 'toggle'});
  });
});

При любом нажатии <a class="toggle"> будет найдено следующее <p> и оно исчезнет, ​​переключая его. Кроме того, классы не могут начинаться с цифры, не делайте этого для предсказуемых результатов.

0 голосов
/ 18 апреля 2010

Попробуйте это: 

$(function(){
    $('a.toggle, a.toggle h4').toggle(function(){
      $(this).next().fadeOut('slow');
    }, function(){
      $(this).next().fadeIn('slow');
    });
});

Дайте вашим ссылкам class вместо id.

...