Question

因此，我创建了一个带有过滤功能的搜索栏，当您单击过滤器图标时，该功能将会打开。然而，在测试时我发现了一个错误。出于某种原因，如果单击“清除所有过滤器”，则需要再次单击列表中的项目两次（而不是一次 - 按照预期的那样），然后再次更改其背景颜色。此外，如果您再次单击某个项目以再次突出显示该项目，然后取消突出显示该项目，则只需单击一次即可再次突出显示该项目。

Here is a JSFiddle.

我认为可能与以下if else语句中未指定背景颜色有关

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

然而无论出于何种原因，在JS中指定this.style.background === 'rgb(227, 226, 224)'并且.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)';
    };
};

不知道现在该做什么。

Answer 1

这是因为无论何时清除列表，都要在每个'filter-option'上设置样式背景以清除它...这是有问题的。

这是更新的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();
};

Answer 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();
};

一个函数导致之后另一个函数的不规则行为

2 个答案: