toggleClass или show/hide/toggle
Добрый день уважаемые !
Есть 4 одинаковых дива , в которых есть спан кнопка , при клике на которую должен выезжать блок с подсказкой . Я чуть запутался, я знаю решение очевидно, но что то я всю голову сломал , попытался сделать по событию $(".tooltip").slideToggle("slow"); в итоге получилось что при клике на кнопку выезжают все 4 подсказки из четырех блоков ( Я подумал что возможно будет правильнее добавить класс, и потом по условию показать подсказку . возможно я ошибаюсь конечно , прошу помочь мне разобраться в моей глобальной проблеме. С уважением Антон
<div>
<div class="tooltip-wrap">
<span class="tooltip">
большая подсказка
</span>
</div>
<span class="green">кнопка</span>
</div>
$(".green").click(function () {
$(this).toggleClass("selected");
});
|
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<style>
.green {
cursor: pointer;
}
</style>
<div>
<div class="tooltip-wrap">
<span class="tooltip">
большая подсказка1
</span>
</div>
<span class="green">кнопка1</span>
</div><br>
<div>
<div class="tooltip-wrap">
<span class="tooltip">
большая подсказка2
</span>
</div>
<span class="green">кнопка2</span>
</div>
<script>
jQuery(function ($) {
$(".green").click(function () {
$(this).parent().contents().find('.tooltip').slideToggle("slow");
});
});
</script>
предполагаю, что отфильтровать можно гораздо лучше |
Вариант...
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<style>
.green {
cursor: pointer;
}
</style>
</head>
<body>
<div>
<div class="tooltip-wrap">
<span class="tooltip">
большая подсказка1
</span>
</div>
<span class="green">кнопка1</span>
</div><br>
<div>
<div class="tooltip-wrap">
<span class="tooltip">
большая подсказка2
</span>
</div>
<span class="green">кнопка2</span>
</div>
<script>
jQuery(function ($) {
$(".green").click(function () {
$(this).prevUntil().slideToggle("slow");
});
});
</script>
</body>
</html>
|
Ой огромное человеческое спасибо, оказалось всё на много проще , есть метод который сылаеться на родителя а также методы prev, prevAll,prevUntil и parentsUntil . Погуглил методы из ваших примеров.
Может быть господа посоветуете литературу , что бы я больше не изобретал велосипед. |
|
Цитата:
http://api.jquery.com/prevUntil/ с 1.4 версии => ресурс умер ещё в 2010 больше туда не хожу :D |
| Часовой пояс GMT +3, время: 18:18. |