Форум программистов, компьютерный форум, киберфорум
jQuery
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.98/145: Рейтинг темы: голосов - 145, средняя оценка - 4.98
 Аватар для Johnlion
63 / 3 / 1
Регистрация: 11.05.2011
Сообщений: 666

Toggle и изменение текста кнопки при клике на нее

26.03.2014, 03:31. Показов 27923. Ответов 11
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
По нажатию на кнопку "Подробнее" срабатывает toggle и раскрывается div. Как только я нажал на кнопку она должна сменить надпись на "Скрыть", и наоборот. как это сделать?
Пока получается сменить на "Скрыть", а обратно на "Подробнее" не меняется. И смена на "Скрыть" происходит только после срабатывания toggle, а не сразу по нажатию на кнопку.
JavaScript
1
2
3
4
5
6
7
8
9
var ind = 1;
        $('#open' + ind).click(function(){
 
            $('#hidd' + ind).toggle('slow', function(){
                var oc= $('#hidd' + ind).attr('display') == 'none' ? 'Подробнее' : 'Скрыть';
                $('#open' + ind).html(oc);
            });
 
        });
0
Лучшие ответы (1)
Programming
Эксперт
39485 / 9562 / 3019
Регистрация: 12.04.2006
Сообщений: 41,671
Блог
26.03.2014, 03:31
Ответы с готовыми решениями:

Изменение фона кнопки при клике на нее
Здравствуйте, подскажите пожалуйста можно ли чтобы во время клика по кнопки она меняла свою картинку?

Получить id кнопки при клике на нее
Я сильно облажался. Надеюсь мне кто-нибудь поможет и не придется переписывать весь код... Нужно при клике на кнопку получить ее id....

Изменение прозрачности картинки при клике на нее
Имеется вот такой css: .manager_yes{ opacity:1; /*прозрачность для всех*/ filter:alpha(opacity=100); /*прозрачность для...

11
 Аватар для Lazy_Den
3325 / 2845 / 1423
Регистрация: 15.01.2014
Сообщений: 6,170
26.03.2014, 04:19
Не плохо было бы еще и структуру html показывать... Смотрите такой вариант:
JavaScript
1
2
3
4
5
6
var ind = 1;
$('#open' + ind).click(function(){
    var hBlock = $('#hidd' + ind);
    $(this).text(hBlock.is(':visible') ? 'Подробнее' : 'Скрыть');
    hBlock.toggle('slow');
});
2
 Аватар для Johnlion
63 / 3 / 1
Регистрация: 11.05.2011
Сообщений: 666
26.03.2014, 16:42  [ТС]
Lazy_Den, спасибо

Добавлено через 6 часов 0 минут
Lazy_Den, вопрос: а как мне сделать, чтобы это работало не только для элементов с ind = 1, а для всех элементов с id = "#open" + индекс и id = "#hidd" + индекс.

У меня #open и #hidd лежат в div с классом rev. пытаюсь делать так, но не получается
JavaScript
1
2
3
4
5
for (var ind=1; ind <= $('.rev').size(); ind++) {
    var hBlock = $('#hidd' + ind);
    $(this).text(hBlock.is(':visible') ? 'Подробнее' : 'Скрыть');
    hBlock.toggle('slow');
}
0
 Аватар для Lazy_Den
3325 / 2845 / 1423
Регистрация: 15.01.2014
Сообщений: 6,170
26.03.2014, 16:52
Лучший ответ Сообщение было отмечено Lazy_Den как решение

Решение

Цитата Сообщение от Johnlion Посмотреть сообщение
как мне сделать, чтобы это работало не только для элементов с ind = 1
Во-первых, я не понимаю зачем вам там id? Ведь проще же сделать классами: один класс для кнопки и класс для контейнера. Во-вторых, как же вас всех приучить, что важно знать и структуру HTML! Большинство *овнокода получается, когда ты "образно" задаешь вопрос, а тебе "образно" отвечают, не зная, какая ситуация в реале. Для определенных задач, можно найти общее решение, но не идеальное, а можно под эту задачу, найти то решение, которое и будет оптимально.
Пример тут.
JavaScript
1
2
3
4
5
$('.rev').on('click', '.open', function(){
    var hBlock = $(this).siblings('.hidd');
    $(this).text(hBlock.is(':visible') ? 'Подробнее' : 'Скрыть');
    hBlock.toggle('slow');
});
0
0 / 0 / 1
Регистрация: 03.07.2015
Сообщений: 80
23.03.2016, 20:52
Lazy_Den, подскажите, пожалуйста, как сделать. У меня есть 5 ссылок <a>
Нажимая на них должен открываться соответствующий div по id.
Эти div будут располагаться под блоком с ссылками
0
7 / 7 / 3
Регистрация: 10.08.2014
Сообщений: 46
23.03.2016, 22:17
D1mka21, https://jsfiddle.net/gqj7mf7f/
0
0 / 0 / 1
Регистрация: 03.07.2015
Сообщений: 80
24.03.2016, 14:21
Asrover, блин, все так просто))) это обычные якоря получается?)
а так лучше, чем на js, или все таки искать способ на js
а плавный скролинг добавлять уже через js?!)

Добавлено через 15 часов 51 минуту
Lazy_Den, вот html/css https://jsfiddle.net/d1mka21/ecesw2mn/
Подскажите, как сделать, что бы кликая по ссылкам <a>, с class"profile_link", открывала определенный div c id.
div открытым только один может быть, и при открытии делалась прокруткаоткрывшемуся div.
Я на другой странице делать через аккордион, но там и ссылка и див рядом находятся, и тут они разнесены.
Может можно просто как-то дополнить: jQuery UI – виджет Accordion?

Подскажите, пожалуйста)
0
 Аватар для Lazy_Den
3325 / 2845 / 1423
Регистрация: 15.01.2014
Сообщений: 6,170
24.03.2016, 14:35
D1mka21, можно и без ID обойтись:
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var links = $('.profile_link'),
blocks = $('.profile-block'),
distance = blocks.map(function(i, el){
    return $(el).offset().top
}).get();
 
links.on('click', function(e){
    e.preventDefault();
    var indx = links.index(this);
    $('html, body').animate({
    scrollTop: distance[indx]
  }, 500, function(){
    blocks.not(':eq(' + indx + ')').slideUp();
    blocks.eq(indx).slideDown();
  });
});
0
0 / 0 / 1
Регистрация: 03.07.2015
Сообщений: 80
24.03.2016, 14:46
Lazy_Den,
Спасибо большое, что ответили)
Но чет у меня на заработало(
я этот код вставил в https://jsfiddle.net/d1mka21/ecesw2mn/
Или нужно было что-то еще добавить?
0
 Аватар для Lazy_Den
3325 / 2845 / 1423
Регистрация: 15.01.2014
Сообщений: 6,170
24.03.2016, 15:00
Цитата Сообщение от D1mka21 Посмотреть сообщение
Или нужно было что-то еще добавить?
Если тестируете в песочнице, то надо выбирать библиотеку, с которой работаете (во фрейме "JavaScript" кнопка с иконкой "шестеренки"). Смотрим
1
0 / 0 / 1
Регистрация: 03.07.2015
Сообщений: 80
24.03.2016, 15:04
Lazy_Den, да заработало)))
спасибо)
а что нужно добавить, что бы при повторном клике div закрывался обратно?)
0
 Аватар для Lazy_Den
3325 / 2845 / 1423
Регистрация: 15.01.2014
Сообщений: 6,170
24.03.2016, 15:22
Цитата Сообщение от D1mka21 Посмотреть сообщение
при повторном клике div закрывался обратно
JavaScript
1
2
3
4
//Вместо 
blocks.eq(indx).slideDown();
//Пишем
blocks.eq(indx).slideToggle();
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
inter-admin
Эксперт
29715 / 6470 / 2152
Регистрация: 06.03.2009
Сообщений: 28,500
Блог
24.03.2016, 15:22
Помогаю со студенческими работами здесь

Изменение размера картинки при клике на нее и сохранение размеров пока курсор на ней
Есть картинка, при клике на нее, она увеличивается и сохраняет свои размеры до тех пор, пока на ней курсор мыши. Скорее всего это можно...

Изменение цвета кнопки при клике
как сделать чтоб кнопка меняла цвет при нажатии на неё?

Изменение размера кнопки при клике
Привет читателям CF.ru. Задача в следующем: Есть древний hta.Тыкаем ЛКМ уменьшаем на 2px при каждом тыке, а при ПКМ увеличиваем на 2px. ...

Изменение маргин-топ при клике кнопки
Подскажите как сделать такое чудо, есть блок(прижат маргином вниз с высотой = X) и кнопка, нужно обращаясь по классам сделать что бы при...

Изменение текста при клике
Добрый день, подскажите , как менять текст на показать/скрыть при нажатии на кнопку, вот рабочий пример. Спасибо! ...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
12
Ответ Создать тему
Новые блоги и статьи
PhpStorm 2025.3: WSL Terminal всегда стартует в ~
and_y87 14.12.2025
PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .
Access
VikBal 11.12.2025
Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.
Новый ноутбук
volvo 07.12.2025
Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro
Музыка, написанная Искусственным Интеллектом
volvo 04.12.2025
Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .
От async/await к виртуальным потокам в Python
IndentationError 23.11.2025
Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .
Поиск "дружественных имён" СОМ портов
Argus19 22.11.2025
Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .
Сколько Государство потратило денег на меня, обеспечивая инсулином.
Programma_Boinc 20.11.2025
Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .
Ломающие изменения в C#.NStar Alpha
Etyuhibosecyu 20.11.2025
Уже можно не только тестировать, но и пользоваться C#. NStar - писать оконные приложения, содержащие надписи, кнопки, текстовые поля и даже изображения, например, моя игра "Три в ряд" написана на этом. . .
Мысли в слух
kumehtar 18.11.2025
Кстати, совсем недавно имел разговор на тему медитаций с людьми. И обнаружил, что они вообще не понимают что такое медитация и зачем она нужна. Самые базовые вещи. Для них это - когда просто люди. . .
Создание Single Page Application на фреймах
krapotkin 16.11.2025
Статья исключительно для начинающих. Подходы оригинальностью не блещут. В век Веб все очень привыкли к дизайну Single-Page-Application . Быстренько разберем подход "на фреймах". Мы делаем одну. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2025, CyberForum.ru