Как вызвать функцию по клику?

0 Пользователей и 1 Гость просматривают эту тему.
  • 14 Ответов
  • 302 Просмотров
*

DjumaI

  • Захожу иногда
  • **
  • 14
  • 0
Ребята подскажите пожалуйста!  
По клику на ссылку должна срабатывать функция.

Ссылка 1: <a class="close-link"><i class="fa fa-close"></i></a>
Ссылка 2: <a class="collapse-link"><i class="fa fa-chevron-up"></i></a>

Функция находится в отдельном файле, Файл js подключен к шаблону сайта.

Смотрел фаербагом html-код страницы, но не вижу как вызывается эта функция.

(Функция по клику сворачивает и разворачивает блок модуля с текстом.
Пример можете посмотреть здесь https://colorlib.com/polygon/gentelella/index.html )

Скрипт смотрите в спойлере:
Спойлер
[свернуть]
Мой HTML-код:
Спойлер
[свернуть]
CSS:
Спойлер
[свернуть]

Здесь https://colorlib.com/polygon/gentelella/index.html смотрите рабочие блоки  App Versions,  Device Usage,  Quick Settings
Но даже если скопировать HTML-Код (Весь модуль напр. App Versions) и вставить рядом с этими блоками на этом же сайте(в визуальном редакторе) он не будет работать!
« Последнее редактирование: 25.11.2016, 11:32:03 от DjumaI »

*

Филипп Сорокин

  • Практически профи
  • *******
  • 1781
  • 135
Re: Как вызвать функцию по клику?
« Ответ #1 : 25.11.2016, 09:04:08 »
И вопрос ваш в чём?
Ставь лайк, если согласен, и делай репост!

  => мои публикации
    => мои работы
      => спектр моих услуг

*

DjumaI

  • Захожу иногда
  • **
  • 14
  • 0
Re: Как вызвать функцию по клику?
« Ответ #2 : 25.11.2016, 09:23:13 »
И вопрос ваш в чём?
Почему функция у меня на сайте не вызывается а на их сайте работает?

Я штмл со стилями и файл со скриптами СКОПИРОВАЛ с того сайта!
(ШТМЛ-код копировал с помощью инструментов для разработчика в браузере, подозреваю что в ШТМЛ-коде при таком копировании упускается какое то событие типа onclick или чтото другое )

Пробовал с помощью инструмента разработчиков визуально редактировать блоки на их сайте, копировал полностью модуль и вставлял рядом его копию - в итоге копия не работает а оригинал работает сворачивается и разворачивается, почему не могу понять!
Подскажите пожалуйста, всю ночь гуглил решение так и не нашел!

*

Филипп Сорокин

  • Практически профи
  • *******
  • 1781
  • 135
Re: Как вызвать функцию по клику?
« Ответ #3 : 25.11.2016, 09:53:18 »
Цитировать
ШТМЛ
HTML, эйч-ти-эм-эль :)

Функция, о которой вы говорите, подвешена в качестве обработчика на определённое событие. Это можно сделать не только в ШТМЛ посредством аттрибута onclick (этот вариант считается "грязным" кодингом), но также в JavaScript, встроенном или внешнем скрипте, например:

Код
jQuery(function($){
  $('.close-link').on('click', ОБРАБОТЧИК);
});

P.S. Жирным шрифтом не злоупотребляйте. Ваши выделения никак не влияют на содержание Вашего вопроса и способность окружающих его понять.

Ставь лайк, если согласен, и делай репост!

  => мои публикации
    => мои работы
      => спектр моих услуг

*

DjumaI

  • Захожу иногда
  • **
  • 14
  • 0
Re: Как вызвать функцию по клику?
« Ответ #4 : 25.11.2016, 10:13:40 »
HTML, эйч-ти-эм-эль :)

Функция, о которой вы говорите, подвешена в качестве обработчика на определённое событие. Это можно сделать не только в ШТМЛ посредством аттрибута onclick (этот вариант считается "грязным" кодингом), но также в JavaScript, встроенном или внешнем скрипте, например:

Код
jQuery(function($){
  $('.close-link').on('click', ОБРАБОТЧИК);
});

P.S. Жирным шрифтом не злоупотребляйте. Ваши выделения никак не влияют на содержание Вашего вопроса и способность окружающих его понять.


Спасибо за ответ и поучения  :-)
Но мне вот интересно почему мною  описаный пример у меня не работает? Где я протупил или что упустил?
Это уже дело принципа узнать и усвоить урок.


*

robert

  • Профи
  • ********
  • 4006
  • 371
Re: Как вызвать функцию по клику?
« Ответ #5 : 25.11.2016, 11:03:54 »
Приведите ваш HTML-код: без него нечего вам подсказать.
  • Не будь паразитом, сделай что-нибудь самостоятельно!
  • В личке и по Skype не даю советов.

*

DjumaI

  • Захожу иногда
  • **
  • 14
  • 0
Re: Как вызвать функцию по клику?
« Ответ #6 : 25.11.2016, 11:16:35 »
Приведите ваш HTML-код: без него нечего вам подсказать.
Мой HTML-код:
Спойлер
[свернуть]
CSS:
Спойлер
[свернуть]

Здесь https://colorlib.com/polygon/gentelella/index.html смотрите рабочие блоки  App Versions,  Device Usage,  Quick Settings
Но даже если скопировать HTML-Код (Весь модуль напр. App Versions) и вставить рядом с этими блоками на этом же сайте ( с помощью инструмента для разработчика (визуальный редактор) ) он не будет работать!


« Последнее редактирование: 25.11.2016, 11:33:05 от DjumaI »

*

robert

  • Профи
  • ********
  • 4006
  • 371
Re: Как вызвать функцию по клику?
« Ответ #7 : 25.11.2016, 11:40:05 »
Все работает же: https://jsfiddle.net/n_robert/weL0o3Lg/. Но зачем так много лишнего, если хотите лишь сворачивать/разворачивать элемент?
  • Не будь паразитом, сделай что-нибудь самостоятельно!
  • В личке и по Skype не даю советов.

*

DjumaI

  • Захожу иногда
  • **
  • 14
  • 0
Re: Как вызвать функцию по клику?
« Ответ #8 : 25.11.2016, 12:09:43 »
Все работает же: https://jsfiddle.net/n_robert/weL0o3Lg/. Но зачем так много лишнего, если хотите лишь сворачивать/разворачивать элемент?
Спасибо, действительно вижу у вас работает.
А у меня на локальном сервере не хочет вот скрин

Создаю сайт на базовом шаблоне Joomla 3.4.6 Протостар + Bootstrap 3 - может это какой то баг этого шаблона или конфликт бутстрапа?
Поставил Joomla options-master и отключил :
  • Mootools
  • Jquery
  • Bootstrap
Все ошибки исчезли но модуль все равно не сворачивается!
« Последнее редактирование: 25.11.2016, 13:27:14 от DjumaI »

*

DjumaI

  • Захожу иногда
  • **
  • 14
  • 0
Re: Как вызвать функцию по клику?
« Ответ #9 : 25.11.2016, 13:38:13 »
Все работает же: https://jsfiddle.net/n_robert/weL0o3Lg/. Но зачем так много лишнего, если хотите лишь сворачивать/разворачивать элемент?
(Извините что не ответил сразу )
Хочу сделать чтобы модульные позиции сворачивались и разворачивались и чтобы можно было закрыть блок.
Так как опыта в js практически ноль, пытаюсь кое как учиться взяв понравившийся готовый пример и переделывать под себя.

*

SmokerMan

  • Профи
  • ********
  • 5329
  • 689
Re: Как вызвать функцию по клику?
« Ответ #10 : 25.11.2016, 13:51:59 »
Создаю сайт на базовом шаблоне Joomla 3.4.6 Протостар + Bootstrap 3 - может это какой то баг этого шаблона или конфликт бутстрапа?
зачем лепить какие-то скрипты если это есть в Bootstrap?
http://getbootstrap.com/javascript/#collapse

*

DjumaI

  • Захожу иногда
  • **
  • 14
  • 0
Re: Как вызвать функцию по клику?
« Ответ #11 : 25.11.2016, 14:06:38 »
зачем лепить какие-то скрипты если это есть в Bootstrap?
http://getbootstrap.com/javascript/#collapse
Спасибо незнал!  Бутстрап тогда решает сворачивание модуля и закрытие (alert).
А как на счет смены иконки при клике (шеврон вниз и шеврон вверх) - как ее организовать лучше?

И еще хотел бы Вас спросить, Роберт Н. сбросил мне ссылку на рабочий пример https://jsfiddle.net/n_robert/weL0o3Lg/ но если нажать на кнопку Run слева вверху (или CTRL + Return) то после этого пример перестает работать. Почему так?

*

DjumaI

  • Захожу иногда
  • **
  • 14
  • 0
Re: Как вызвать функцию по клику?
« Ответ #12 : 25.11.2016, 14:14:15 »
Все работает же: https://jsfiddle.net/n_robert/weL0o3Lg/. Но зачем так много лишнего, если хотите лишь сворачивать/разворачивать элемент?
После нажатия на рун пример перестаёт работать.

*

robert

  • Профи
  • ********
  • 4006
  • 371
Re: Как вызвать функцию по клику?
« Ответ #13 : 25.11.2016, 15:13:45 »
После нажатия на рун пример перестаёт работать.
Не перестает. Не знаю, на что вы там нажимали.
Убрал лишний код. И еще пример, чтобы вы поняли, как все работает.
  • Не будь паразитом, сделай что-нибудь самостоятельно!
  • В личке и по Skype не даю советов.

*

DjumaI

  • Захожу иногда
  • **
  • 14
  • 0
Re: Как вызвать функцию по клику?
« Ответ #14 : 27.11.2016, 19:46:16 »
Не перестает. Не знаю, на что вы там нажимали.
Убрал лишний код. И еще пример, чтобы вы поняли, как все работает.
Извините что на несколько дней пропал и не ответил Вам!
Спасибо Вам большое за исправленный код (как только заменил его у себя - все заработало). Особенно Вам благодарен за обучающий пример  который объясняет как это работает!
Спасибо Вам за то, что поделились своими знаниями!
Вопрос решен!