jQuery переключает элементы с классом только в родительском div - PullRequest
Новая
       14

jQuery переключает элементы с классом только в родительском div

1 голос
/ 03 июня 2010

Последние два дня я бился головой об стол. Я делаю приложение, которое отображает информацию из БД, заголовок / ссылку, миниатюру и время, сохраненное в неупорядоченном списке, например: http://blog.madebycraig.com/images/full.jpg
Я пытаюсь сделать так, чтобы на элементе была кнопка сворачивания, включающая и выключая миниатюру и время, сэкономленное: http://blog.madebycraig.com/images/minimized.jpg
Я могу это сделать, но это все или ничего. Я нажимаю одну кнопку свертывания, и все идет. Как я могу содержать его, чтобы просто переключать элементы с определенным именем класса, которые являются дочерними элементами для div, в котором находится кнопка свертывания? Я пробовал .parent (), .child (), .next (), .prev (). Я бросил все, что я знаю. Теперь я обращаюсь к вам, добрые господа (или мадам). Что я делаю неправильно? Вот уль, на котором я пытаюсь его запустить. 

echo'
<li class="bookmarkContainer">
<a href="'.$row['url'].'" class="toggle"><img class="thumb" src="images/placeholder.png" /></a>
<div class="title"><a href="'.$row['url'].'" class="bookmrk" target="_blank">'.$row['title'].'</a></div>
<div class="dt toggle">'.relativeTime($row['dt']).'</div><br />
<a class="collapse" href="#">hide</a>
<a class="delete" href="?delete='.$row['id'].'" id="'.$row['id'].'">Delete Bookmark</a>
</li>';

1 Ответ

4 голосов
/ 03 июня 2010

Вы можете сделать это, используя .closest() и .find(), например: 

$(".collapse").click(function() {
  $(this).closest('.bookmarkContainer').find('.toggle').toggle();
});

Если у вас их много или они меняются с помощью ajax (кажется, что это связано с поиском), используйте .live() или .delegate() следующим образом: 

$(".collapse").live('click', function() {
  $(this).closest('.bookmarkContainer').find('.toggle').toggle();
});
//or...
$("#ulID").delegate('.collapse', 'click', function() {
  $(this).closest('.bookmarkContainer').find('.toggle').toggle();
});
...