Форум

Anton Essential · #1 (**permalink**) 28.05.2013, 21:23

Добрый день уважаемые !

Есть 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");
});

bes · #2 (**permalink**) 28.05.2013, 22:57

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

предполагаю, что отфильтровать можно гораздо лучше

рони · #3 (**permalink**) 28.05.2013, 23:28

Вариант...

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

Anton Essential · #4 (**permalink**) 29.05.2013, 04:49

Ой огромное человеческое спасибо, оказалось всё на много проще , есть метод который сылаеться на родителя а также методы prev, prevAll,prevUntil и parentsUntil . Погуглил методы из ваших примеров.

Может быть господа посоветуете литературу , что бы я больше не изобретал велосипед.

Hekumok · #5 (**permalink**) 29.05.2013, 10:53

http://jquery.page2page.ru/tags/ifr.html

bes · #6 (**permalink**) 29.05.2013, 19:44

Сообщение от рони

prevUntil()

ээ, кто там обновляет содержимое http://jquery-docs.ru/
http://api.jquery.com/prevUntil/
с 1.4 версии => ресурс умер ещё в 2010
больше туда не хожу

Форум

Справочник

Discord чат

Курсы javascript