Почему мой класс не переключается этой функцией JavaScript? - PullRequest
Новая
       1

Почему мой класс не переключается этой функцией JavaScript?

0 голосов
/ 19 февраля 2020

Я пытаюсь переключить класс .active при нажатии на #datePickerStart div. Он переключается только при нажатии на элемент div, но я хочу, чтобы элемент был скрыт при нажатии за пределами DatePicker. 

$('#datePickerStart').addEventListener('click', (e) => {
    console.log(e.path);
    if (!checkEventPathForClass(e.path, 'booking-dropdown')) {
        $('#dropDownStart').classList.toggle('active');
    }
});

function checkEventPathForClass(path, selector) {
    for (item of path) {
        if (item.classList && item.classList.contains(selector)) {
            return true;
        }
    }
    return false;
}

.active {
    display: block;
}

JSBin для моего веб-сайта.

Ответы [ 3 ]

1 голос
/ 19 февраля 2020

Вам необходимо объявить функцию onclick для всего документа, и затем вы можете проверить, нажал ли Dom элемент datepicke, или просто удалить активный класс из DatePicker при каждом щелчке. 

document.addEventListener("click", function(e){
    if( e.target.id == "dropDonStart" ){
        $('#dropDownStart').classList.toggle('active');
    }else{
        $('#dropDownStart').classList.remove('active');
    }
});

Не проверено, но должно работать.

0 голосов
/ 19 февраля 2020

Разве не хороший синтакс: 

`if (!checkEventPathForClass(e.path, 'booking-dropdown')) {
    $('#dropDownStart').classList.add('active');
}`

?

0 голосов
/ 19 февраля 2020

Создайте отдельную функцию, например shouldToggleClass, и вызовите эту функцию из обоих прослушивателей событий. Также вы можете напрямую использовать click вместо addEventlistener, поскольку jquery уже используется 

const $ = (selector) => {
  return document.querySelector(selector);
};

$('#datePickerStart').addEventListener('click',(e) => {
  shouldToggleClass(e)

});

function shouldToggleClass(e) {
  const isEventPath = checkEventPathForClass(e.path, 'booking-dropdown');
  if (!isEventPath) {
    $('#dropDownStart').classList.toggle('active');
  }
}


function checkEventPathForClass(path, selector) {
  for (item of path) {
    if (item.classList && item.classList.contains(selector)) {
      return true;
    }
  }
  return false;
}

$('body').addEventListener('click',(e) => {
  shouldToggleClass(e)
});
...