Одна функция вызывает нерегулярное поведение другой функции

Таким образом, я создал строку поиска с функцией фильтра, которая откроется при нажатии на значок фильтра. Однако во время тестирования я обнаружил ошибку. По какой-то причине, если вы нажмете «очистить все фильтры», вам нужно будет нажать на элемент в списке дважды (а не один раз-как было задумано), прежде чем он снова изменит свой цвет фона. Кроме того, если вы дважды щелкнете по элементу, чтобы выделить его снова, а затем разожмете его, потребуется только один клик, чтобы выделить его снова, как обычно.

Вот JSFiddle.

Я подумал, что это может иметь какое-то отношение к не указанию цвета фона в условии следующего заявления if else

function highlightSelections() {
    if (this.style.background === '') {
        this.style.background = '#f7931a';
    } else {
        console.log(this.style.background);
        this.style.background = '';
    };
};

Тем не менее, по какой-то причине указание this.style.background === 'rgb(227, 226, 224)'в JS и .options { background: rgb(227, 226, 224); }CSS нарушает его в гораздо большей степени.

В следующем коде первый console.log(this.style.background)регистрирует пустую строку, даже если я явно задал цвет фона в CSS.

function highlightSelections() {
    if (this.style.background === 'rgb(227, 226, 224)') {
        console.log(this.style.background);
        this.style.background = '#f7931a';
    } else {
        console.log(this.style.background);
        this.style.background = 'rgb(227, 226, 224)';
    };
};

Не знаю, что теперь делать.

2 ответа

  1. Это происходит потому, что всякий раз,когда вы очищаете свой список, вы устанавливаете фон стиля на каждом «фильтр-опции», чтобы очистить его…это проблематично.

    Вот обновленный jsfiddle

    Измените clearAllFilters на это, и вы должны быть хороши, чтобы пойти.

     function clearAllFilters() {
      while (selectedFilters.length > 0) {
          selectedFilters.pop();
      };
      for (var i = 0; i < filterOptionsClass.length; i++) {
          filterOptionsClass[i].removeAttribute("style");
      };
      filterContainer.innerHTML = '';
      toggleClearIcon();
    };
    
  2. Вот (или был) виновник:

    clearIcon.addEventListener('click', clearAllFilters);
    function clearAllFilters() {
        ...
        for (var i = 0; i < filterOptionsClass.length; i++) {
            filterOptionsClass[i].style.background = 'rgb(227, 226, 224)';
        };
        currencyOption.style.background = 'rgb(227, 226, 224)';
        regionOption.style.background   = 'rgb(227, 226, 224)';
        industryOption.style.background = 'rgb(227, 226, 224)';
        reviewOption.style.background   = 'rgb(227, 226, 224)';
        filterContainer.innerHTML = '';
        toggleClearIcon();
    };
    

    И следующий код работает как очарование:

    clearIcon.addEventListener('click', clearAllFilters);
    function clearAllFilters() {
        ...
        for (var i = 0; i < filterOptionsClass.length; i++) {
            filterOptionsClass[i].style.background = '';
        };
        currencyOption.style.background = '';
        regionOption.style.background   = '';
        industryOption.style.background = '';
        reviewOption.style.background   = '';
        filterContainer.innerHTML = '';
        toggleClearIcon();
    };