Блог

Главная - Вопросы по программированию - Div для отключения при щелчке и повторного включения при щелчке другого div

Div для отключения при щелчке и повторного включения при щелчке другого div

#jquery

Вопрос:

У меня есть div, который при нажатии покажет модальный, как только модальный будет виден, пользователь нажимает кнопку в модальном, и он закрывается.

Я хочу запретить пользователю снова нажимать на начальный div, они смогут щелкнуть его только в том случае, если они нажали другой другой div.

Вот мой код с наиболее «похожим»/псевдокодом того, чего я хочу достичь:

HTML

 lt;divgt; lt;div class="container-what-we-offer"gt;  lt;pgt;It's what we offerlt;/pgt; lt;/divgt; lt;div class="container-are-you-sure"gt;  lt;pgt;  Are you sure?  lt;/pgt; lt;/divgt; lt;div class="modal"gt;  lt;pgt;  This is what we offer modal  lt;/pgt;  lt;buttongt;Happy with the offerlt;/buttongt; lt;/divgt; lt;/divgt;

Jquery

 $(".container-are-you-sure").click(function(e) {  showModal();  if(modal has been shown amp;amp; button happy with the offer has been clicked){  dontShowModalAgainUponClickingMe(); } else if (container-what-we-offer has been clicked){  showModal() } });

Спасибо

Комментарии:

1. Вы можете добавить глобальную переменную, чтобы проверить, был ли модальный режим уже открыт, и еще одну, если была нажата кнопка

2. спасибо @polypode, и как мне затем остановить функцию, если кнопка была нажата и модальный был открыт?

3. Вы можете либо добавить if инструкцию для проверки двух переменных, но ничего не делать. Или вы можете полностью удалить прослушиватель событий

Ответ №1:

Вы можете установить переменную и использовать ее для управления тем, была ли нажата кнопка и будет ли виден модал или нет.

 var modalButtonClicked = false; $(".container-are-you-sure").click(function(e) {   if (!modalButtonClicked) {  showModal();  } });  function showModal() {  $(".modal")  .show(); }  $(".modal button").click(function() {  modalButtonClicked = true;  $(".modal").hide(); });

ДЕМОНСТРАЦИЯ

 var modalButtonClicked = false; $(".container-are-you-sure").click(function(e) {   if (!modalButtonClicked) {  showModal();  } });  function showModal() {  $(".modal")  .show(); }  $(".modal button").click(function() {  modalButtonClicked = true;  $(".modal").hide(); }); 
 .modal {  display: none; } 
 lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"gt;lt;/scriptgt; lt;divgt;  lt;div class="container-what-we-offer"gt;  lt;pgt;It's what we offerlt;/pgt;  lt;/divgt;  lt;div class="container-are-you-sure"gt;  lt;pgt;  Are you sure?  lt;/pgt;  lt;/divgt;  lt;div class="modal"gt;  lt;pgt;  This is what we offer modal  lt;/pgt;  lt;buttongt;Happy with the offerlt;/buttongt;  lt;/divgt; lt;/divgt;
Метки: