Одна функция для множества кнопок
Ребят! Помогите пожалуйста! Весь интернет перерыл, хотел найти, что нибудь в качестве примера...
Задача: Есть кнопки, не важно сколько, хоть 100 штук, допустим, только 3. И также есть 3 span'a. Мне нужно сделать, чтобы нажал на первый баттон, спан первый убрался, нажал на второй, второй спан убрался и т.д. Хотел сделать с if ,но сказали: "А если у тебя 100 баттонов, будешь делать 100 if?". Говорят, что надо, как-то с циклом. Но как? Цикл и в функции, и сама функция в цикле. :blink: Ну, или, как-то по другому.. Т.е. Одна функция для всех кнопок и их может быть неограниченное количество. Добавь, например, еще 5 кнопок и 5 спанов, чтобы также все работало.. Вот, что я пробовал сделать: index.html:
<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
</head>
<body>
<div class="main">
<div class="first">
<button type="button" class="btn" id="btn1">btn1</button>
<h2><span class="text" id="text1">Text1</span></h2>
</div>
<div class="second">
<button type="button" class="btn" id="btn2">btn2</button>
<h2><span class="text" id="text2">Text2</span></h2>
</div>
<div class="third">
<button type="button" class="btn" id="btn3">btn3</button>
<h2><span class="text" id="text3">Text3</span></h2>
</div>
</div>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</body>
</html>
script.js:
$(document).ready(function () {
$(function () {
$('.btn').on('click', function () {
alert('Обработчик для кнопки: ' + $(this).text());
$('.text').css('display', 'none');
});
});
});
|
твоя задача - скрыть дочерний элемент <span> следующего за кнопкой элемента?
Если да - формализуй эту задачу в код и все заработает. |
anreew,
зачем 2 jquery |
Цитата:
|
Цитата:
Если можно пример, хотя бы... Должна быть одна функция для трёх кнопок или более, чтобы при нажатии на первую кнопку, первый спан пропадал, на вторую, второй пропадал и т.д. Я делал это, отдельно для каждой кнопки, прописывал, но поставили условие: "Если у тебя будет 100 кнопок? Ты же не будешь для каждой прописывать", надо сделать одной функцией. Я не знаю, как это реализовать... |
$(я).следующий().найти('span').скрыть()
я - это this. Остальное в google translate переведи - должно заработать) |
:) можно и без .найти('span') только заголовок скрыть
|
Цитата:
Цитата:
Но все бы ничего, но теперь задача усложнилась! Что, если у меня вот так? И мне нужно скрыть по классу... Почему-то не скрывает..:-? Возьмем допустим один div, задача та же самая! Нужно скрыть первый span(class="text1")!
...
<div class="first">
<h2><span class="text1" id="text1">Text1</span></h2>
<h2><span class="text2" id="text2">Text2</span></h2>
<input type="text" class="input" id="input1">
<button type="button" class="btn" id="btn1">
<span class="spanbtn" id="spanbtn"></span>btn1
</button>
</div>
...
|
anreew,
найди предка и в предке поищи нужный класс. |
Цитата:
Пробовал! Получилось! Спасибо за вашу помощь!:yes: Но, еще одно "но". :D Допустим у меня все div с одинаковым классом. Не получается так.:( Вот так:
<div class="main">
<div class="form">
<h2><span class="text1" id="text1">Text1</span></h2>
<h2><span class="text2" id="text2">Text2</span></h2>
<input type="text" class="input" id="input1">
<button type="button" class="btn" id="btn1">
<span class="spanbtn" id="spanbtn"></span>btn1
</button>
</div>
<div class="form">
...
тоже самое, что и в первом div, только класс button "btn2", span с такими же классами
...
</div>
<div class="form">
...
тоже самое, что и в первом div, только класс button "btn3", span с такими же классами
...
</div>
|
| Часовой пояс GMT +3, время: 21:19. |