Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 06.11.2014, 15:22
Аватар для anreew
Новичок на форуме
Отправить личное сообщение для anreew Посмотреть профиль Найти все сообщения от anreew
 
Регистрация: 06.11.2014
Сообщений: 7

Одна функция для множества кнопок
Ребят! Помогите пожалуйста! Весь интернет перерыл, хотел найти, что нибудь в качестве примера...
Задача:
Есть кнопки, не важно сколько, хоть 100 штук, допустим, только 3. И также есть 3 span'a. Мне нужно сделать, чтобы нажал на первый баттон, спан первый убрался, нажал на второй, второй спан убрался и т.д.
Хотел сделать с if ,но сказали: "А если у тебя 100 баттонов, будешь делать 100 if?". Говорят, что надо, как-то с циклом. Но как? Цикл и в функции, и сама функция в цикле. Ну, или, как-то по другому.. Т.е. Одна функция для всех кнопок и их может быть неограниченное количество. Добавь, например, еще 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');
        });
    });
});

Последний раз редактировалось anreew, 06.11.2014 в 16:52.
Ответить с цитированием
  #2 (permalink)  
Старый 06.11.2014, 16:04
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

твоя задача - скрыть дочерний элемент <span> следующего за кнопкой элемента?
Если да - формализуй эту задачу в код и все заработает.
__________________
В личку только с интересными предложениями
Ответить с цитированием
  #3 (permalink)  
Старый 06.11.2014, 16:32
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 26,620

anreew,
зачем 2 jquery
Ответить с цитированием
  #4 (permalink)  
Старый 06.11.2014, 16:48
Аватар для anreew
Новичок на форуме
Отправить личное сообщение для anreew Посмотреть профиль Найти все сообщения от anreew
 
Регистрация: 06.11.2014
Сообщений: 7

Сообщение от рони Посмотреть сообщение
anreew,
зачем 2 jquery
Случайно. Извиняюсь.
Ответить с цитированием
  #5 (permalink)  
Старый 06.11.2014, 16:52
Аватар для anreew
Новичок на форуме
Отправить личное сообщение для anreew Посмотреть профиль Найти все сообщения от anreew
 
Регистрация: 06.11.2014
Сообщений: 7

Сообщение от danik.js Посмотреть сообщение
твоя задача - скрыть дочерний элемент <span> следующего за кнопкой элемента?
Если да - формализуй эту задачу в код и все заработает.
Как это сделать? Каким способом?
Если можно пример, хотя бы...
Должна быть одна функция для трёх кнопок или более, чтобы при нажатии на первую кнопку, первый спан пропадал, на вторую, второй пропадал и т.д. Я делал это, отдельно для каждой кнопки, прописывал, но поставили условие: "Если у тебя будет 100 кнопок? Ты же не будешь для каждой прописывать", надо сделать одной функцией. Я не знаю, как это реализовать...
Ответить с цитированием
  #6 (permalink)  
Старый 06.11.2014, 16:58
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

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

я - это this. Остальное в google translate переведи - должно заработать)
__________________
В личку только с интересными предложениями
Ответить с цитированием
  #7 (permalink)  
Старый 06.11.2014, 17:05
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 26,620

можно и без .найти('span') только заголовок скрыть
Ответить с цитированием
  #8 (permalink)  
Старый 07.11.2014, 09:33
Аватар для anreew
Новичок на форуме
Отправить личное сообщение для anreew Посмотреть профиль Найти все сообщения от anreew
 
Регистрация: 06.11.2014
Сообщений: 7

Сообщение от danik.js Посмотреть сообщение
$(я).следующий().найти('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, 07.11.2014 в 09:38.
Ответить с цитированием
  #9 (permalink)  
Старый 07.11.2014, 09:37
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 26,620

anreew,
найди предка и в предке поищи нужный класс.
Ответить с цитированием
  #10 (permalink)  
Старый 07.11.2014, 10:11
Аватар для anreew
Новичок на форуме
Отправить личное сообщение для anreew Посмотреть профиль Найти все сообщения от anreew
 
Регистрация: 06.11.2014
Сообщений: 7

Сообщение от рони Посмотреть сообщение
anreew,
найди предка и в предке поищи нужный класс.
Уважаемый профессор рони!
Пробовал! Получилось! Спасибо за вашу помощь!
Но, еще одно "но".
Допустим у меня все 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>

Последний раз редактировалось anreew, 07.11.2014 в 10:15.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
функция для увеличения div'a и текста в нём gez Общие вопросы Javascript 4 16.10.2009 08:31
Модуль для работы с модулями JSprog Ваши сайты и скрипты 29 02.09.2009 12:31
Переодическое обновление значений для графика, функция для обновления значений yupa87 Общие вопросы Javascript 0 09.07.2009 13:48
Функция onclick для созданных потомков Groonel Общие вопросы Javascript 6 24.04.2009 17:35