Использование JS Как вызвать функцию щелчка только один раз, что будет эквивалентно .one jQuery - PullRequest
Новая
       2

Использование JS Как вызвать функцию щелчка только один раз, что будет эквивалентно .one jQuery

1 голос
/ 12 июля 2020

Здравствуйте, может кто-нибудь мне помочь? У меня проблемы с преобразованием этой части моего кода в JS: 

$(".custom-select-trigger").on("click", function() {
  $('html').one('click',function() {
    $(".custom-select").removeClass("opened");
  });
  $(this).parents(".custom-select").toggleClass("opened");
  event.stopPropagation();
});

У меня пока есть: 

  const customSelectTrigger = document.querySelector(".custom-select-trigger");
  const customSelect = document.querySelector(".custom-select");
  function showOptions(e) {
    e.preventDefault();
    customSelect.classList.toggle("opened");
    e.stopPropagation();
  }

, но я не могу выполнить эту часть для javascript: 

  $('html').one('click',function() {
    $(".custom-select").removeClass("opened");
  });

1 Ответ

2 голосов
/ 12 июля 2020

Вот рабочий код для удаления класса opened из вашего пользовательского выбора при нажатии в любом месте DOM.

Вам нужно использовать JS addEventListener и click для этого.

Чтобы удалить класс из элемента, мы можем использовать функцию .remove и получить classList вашего элемента с помощью querySelector, что будет .custom-select

Изменить : если вы просто хотите использовать функцию щелчка только один раз при загрузке DOM . Затем установка параметра args { once: true } вызовет функцию только один раз.

Я воссоздал ваш пример и его работу.

Выполните фрагмент ниже. 

//Getting HTML element
const htmlElement = document.querySelector("html");
 
//Getting element where to remove the class from
const customSelect = document.querySelector(".custom-select");

//Adding eventlistener to remove class opened from classList
htmlElement.addEventListener("click", function(e) {
  customSelect.classList.remove("opened");
  console.log('Class Removed')
  e.preventDefault();
 },{ once: true });
.opened {
  background-color: red;
}
<html>

<h3>
  Click anywhere on the DOM to remove class from Custom select
</h3>

<div class="custom-select opened">
  My Custom Select
</div>

</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...