Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Одна функция для множества кнопок (https://javascript.ru/forum/jquery/51437-odna-funkciya-dlya-mnozhestva-knopok.html)

anreew 06.11.2014 16:22

Одна функция для множества кнопок
 
Ребят! Помогите пожалуйста! Весь интернет перерыл, хотел найти, что нибудь в качестве примера...
Задача:
Есть кнопки, не важно сколько, хоть 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');
        });
    });
});

danik.js 06.11.2014 17:04

твоя задача - скрыть дочерний элемент <span> следующего за кнопкой элемента?
Если да - формализуй эту задачу в код и все заработает.

рони 06.11.2014 17:32

anreew,
зачем 2 jquery

anreew 06.11.2014 17:48

Цитата:

Сообщение от рони (Сообщение 339467)
anreew,
зачем 2 jquery

Случайно. Извиняюсь.

anreew 06.11.2014 17:52

Цитата:

Сообщение от danik.js (Сообщение 339459)
твоя задача - скрыть дочерний элемент <span> следующего за кнопкой элемента?
Если да - формализуй эту задачу в код и все заработает.

Как это сделать? Каким способом?
Если можно пример, хотя бы...
Должна быть одна функция для трёх кнопок или более, чтобы при нажатии на первую кнопку, первый спан пропадал, на вторую, второй пропадал и т.д. Я делал это, отдельно для каждой кнопки, прописывал, но поставили условие: "Если у тебя будет 100 кнопок? Ты же не будешь для каждой прописывать", надо сделать одной функцией. Я не знаю, как это реализовать...

danik.js 06.11.2014 17:58

$(я).следующий().найти('span').скрыть()

я - это this. Остальное в google translate переведи - должно заработать)

рони 06.11.2014 18:05

:) можно и без .найти('span') только заголовок скрыть

anreew 07.11.2014 10:33

Цитата:

Сообщение от danik.js (Сообщение 339471)
$(я).следующий().найти('span').скрыть()

я - это this. Остальное в google translate переведи - должно заработать)

Цитата:

Сообщение от рони (Сообщение 339473)
:) можно и без .найти('span') только заголовок скрыть

Друзья, спасибо большое! :thanks:
Но все бы ничего, но теперь задача усложнилась!

Что, если у меня вот так? И мне нужно скрыть по классу... Почему-то не скрывает..:-?
Возьмем допустим один 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>
...

рони 07.11.2014 10:37

anreew,
найди предка и в предке поищи нужный класс.

anreew 07.11.2014 11:11

Цитата:

Сообщение от рони (Сообщение 339569)
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, время: 17:02.