javascript if else click event

Я пытаюсь добавить выражение if else в нижеследующее

$('#togglediv4').click(function(e){
     e.preventDefault();
    $('#link4').attr('src','images/contact_link_clicked.png');
});

Я хочу, чтобы изображение изменилось на исходное, если нет события клика, иначе все ссылки, однажды нажатые, останутся на новом изображении.

Поэтому, если изображение не нажато, я хочу показать исходное изображение.

$('#link4').attr('src','images/contact_link_original.png');
1
добавлено отредактировано
Просмотры: 3
источник
nl ja de uz
это jquery? если это так, пометьте его как таковой
добавлено автор imulsion, источник
это jquery? если это так, пометьте его как таковой
добавлено автор imulsion, источник
У всех ваших изображений есть общий класс?
добавлено автор ryadavilli, источник
У всех ваших изображений есть общий класс?
добавлено автор ryadavilli, источник
u хочу добавить, если еще ... потом добавить его, почему спросите ???
добавлено автор geekman, источник
u хочу добавить, если еще ... потом добавить его, почему спросите ???
добавлено автор geekman, источник
Я потерял тебя на полпути ... так что это именно то, что ты хочешь ???
добавлено автор geekman, источник
Я пытался добавить if else, но не могу получить правильный формат
добавлено автор user1347219, источник

5 ответы

Используйте функцию обратного вызова attr и тернарный оператор.

$('#togglediv4').click(function(e){
     e.preventDefault();
     $('#link4').attr('src',function(i, src){
          return src === 'images/contact_link_original.png'
          ? 'images/contact_link_clicked.png'
          : 'images/contact_link_original.png'
     });
});
2
добавлено
источник
+1 для обратного вызова и тройной
добавлено автор JohnJohnGa, источник

Вы должны просто установить атрибут src исходного тега : mages/contact_link_original.png

Затем добавьте событие click, как указано выше.

По умолчанию, когда ваш div не был нажат, он будет содержать исходное изображение.

EDIT: на основе вашего комментария я бы сделал следующее:

  • Добавить класс ко всем изображениям
  • При щелчке любого изображения измените src attr на исходное изображение на ВСЕХ изображениях с этим классом. (Вы можете использовать $ ('. ImgClass') )
  • Затем обновите изображение, на которое было нажато новое изображение.
1
добавлено
источник
но после щелчка я хочу, чтобы изображение возвращалось к оригиналу, как только нажимается другое изображение
добавлено автор user1347219, источник
эта последняя идея звучит правильно, я постараюсь это сделать
добавлено автор user1347219, источник
это $ ('. imgclass'). attr ('src', 'images/newhome_link.png'); определяет все изображения внутри класса, могу ли я указать каждое изображение src отдельно в классе?
добавлено автор user1347219, источник
для каждого щелчка я повернул назад другие ссылки изображений к их оригинальным изображениям. Я определил src для каждого изображения во всех функциях.
добавлено автор user1347219, источник

Вы должны просто установить атрибут src исходного тега : mages/contact_link_original.png

Затем добавьте событие click, как указано выше.

По умолчанию, когда ваш div не был нажат, он будет содержать исходное изображение.

EDIT: на основе вашего комментария я бы сделал следующее:

  • Добавить класс ко всем изображениям
  • При щелчке любого изображения измените src attr на исходное изображение на ВСЕХ изображениях с этим классом. (Вы можете использовать $ ('. ImgClass') )
  • Затем обновите изображение, на которое было нажато новое изображение.
1
добавлено
источник
но после щелчка я хочу, чтобы изображение возвращалось к оригиналу, как только нажимается другое изображение
добавлено автор user1347219, источник
эта последняя идея звучит правильно, я постараюсь это сделать
добавлено автор user1347219, источник
это $ ('. imgclass'). attr ('src', 'images/newhome_link.png'); определяет все изображения внутри класса, могу ли я указать каждое изображение src отдельно в классе?
добавлено автор user1347219, источник
для каждого щелчка я повернул назад другие ссылки изображений к их оригинальным изображениям. Я определил src для каждого изображения во всех функциях.
добавлено автор user1347219, источник

Я думаю, вы ищете что-то вроде этого:

$('#togglediv4').click(function(e){
    e.preventDefault();
    if ($('#link4').attr('src') == 'images/contact_link_original.png') {
        $('#link4').attr('src','images/contact_link_clicked.png');
    }       
});
0
добавлено
источник

Возможно, я неправильно понимаю ваш вопрос, но мне кажется, что вам нужно использовать события mousedown и mouseup вместо click :

$('#togglediv4').mousedown(function(e){
    e.preventDefault();
    $('#link4').attr('src','images/contact_link_clicked.png');
}).mouseup(function(e){
    e.preventDefault();
    $('#link4').attr('src','images/contact_link_original.png');
});
0
добавлено
источник
@ user1347219 Ах, тогда я правильно понял ваш вопрос. В этом случае я бы посмотрел ответ undefined .
добавлено автор Gareth, источник
к сожалению, это работает только в том случае, если мышь оставлена ​​нажатой, иначе она вернется к оригиналу. Я хочу, чтобы изображение менялось, пока не щелкнули другое изображение
добавлено автор user1347219, источник
JavaScript Jobs — чат
JavaScript Jobs — чат
8 336 участник(ов)

JavaScript Jobs — чат для поиска работы и людей Правила оформления: https://teletype.in/@telegram-ru/r1WQe5F1m См. также: @mobile_jobs, @devops_jobs, @nodejs_jobs, @react_js, @angular_ru, @js_ru

Открыть Telegram
JavaScript.ru
JavaScript.ru
7 932 участник(ов)

Сообщество сайта JavaScript.ru в Slack.

Открыть Slack
pro.js
pro.js
4 675 участник(ов)

Про JavaScript и NodeJS Invite: https://t.me/joinchat/Be4rsT5Rsgq30DHutjxXgA Правила: http://telegra.ph/ru-chat-rules-06-19 Вакансии только с ЗП, не чаще раза в неделю.

Открыть Telegram
Верстка сайтов HTML/CSS/JS/PHP
Верстка сайтов HTML/CSS/JS/PHP
3 439 участник(ов)

Правила группы: напишите !rules в чате. Группа Вк: vk.com/web_structure Freelancer: @web_fl Веб Дизайн: @dev_design Маркетолог: @topmarkening Автор: @M_Boroda

Открыть Telegram
JavaScript — русскоговорящее сообщество
JavaScript — русскоговорящее сообщество
3 269 участник(ов)

Рекомендуем сразу отключить уведомления Правила: https://rudevs.network/ByaMH6un7 См. также: @js_noobs_ru, @nodejs_ru, @typescript_ru, @react_js, @electron_ru Вакансии и поиск работы: @javascript_jobs

Открыть Telegram
JavaScript Noobs — сообщество новичков
JavaScript Noobs — сообщество новичков
2 484 участник(ов)

Чат для новичков

Открыть Telegram
Чат — Типичный Верстальщик
Чат — Типичный Верстальщик
1 080 участник(ов)

Основной канал: @tpverstak Обратная связь: @annblok Все ссылки на соц.сети проекта: http://taplink.cc/tpverstak ПРАВИЛА ЧАТА — https://teletype.in/@annblok/BygPgC3E7

Открыть Telegram
javascript_ru
javascript_ru
915 участник(ов)

Сообщество любителей самого популярного языка программирования в мире. Чат основан в 2009 году. Логи: https://goo.gl/9EOeM7 Поддержка бота: @chat_linker (ссылка на репу внутри) Вам будут интересны @frontend_ru и @css_ru

Открыть Telegram
jsChat
jsChat
603 участник(ов)

Чат посвященный программированию на языке javaScript Перед отправкой ссылки на Ваш контент посоветуйтесь с админом Все ссылки удаляются ботом автоматически

Открыть Telegram
JavaScript for Zombies Chat
JavaScript for Zombies Chat
492 участник(ов)

Чат про JavaScript для настоящих zombie! Вход строго по приглашениям! Ссылка для строгих приглашений: https://t.me/joinchat/AAMBHz3Uyr0tuZ7VaB029g

Открыть Telegram
All That JS
All That JS
417 участник(ов)

JS на русском

Открыть Slack
Веб-Технологи: UI/UX, Вёрстка, Фронтенд
Веб-Технологи: UI/UX, Вёрстка, Фронтенд
167 участник(ов)

Всё про веб-дизайн и вёрстку. А также: HTML, CSS, флекс и бутстрапы, шаблонизаторы, препроцессоры, методологии, аглифаеры, улучшаторы и обфускаторы. Обсуждаем темы юзабилити, устраиваем А/В тесты лендингов, и проводим аудит.

Открыть Telegram
DTP :: @DTPublish
DTP :: @DTPublish
147 участник(ов)

Обсуждаемые темы: полиграфия, препресс, верстка, дизайн, иллюстрации, скрипты, плагины. Канал - @DTPublishing

Открыть Telegram