javascript - 如果列表中的所有数据属性都等于“off”，则显示“none found”文本

Question

我是 Javascript 的新手，正在为静态数据构建一个简单的过滤器。如果没有具有选定标签选项的选项，我希望能够显示文本。我怎么能这样做？

用户需要能够同时选择多个过滤器。如果不存在所选过滤器的组合，则应显示“未找到”的文本。

document.addEventListener('click', function (e) {
  var button = e.target;
  
  if (button.getAttribute('data-reset') === 'true') {
    // Reset the filters
    var filter = button.getAttribute('data-filter');
    resetFilter(filter);
  } else {
    // Filter the tag
    var filter = button.getAttribute('data-filter');
    var tag    = button.getAttribute('data-filter-tag');
    filterTag(filter, tag);
  }
});

// Filter tag
function filterTag (filter, tag) {
  var items = document.querySelectorAll('.' + filter + ' > li');

  for (var i = 0; i < items.length; i++) {
    var itemTags = items[i].getAttribute('data-tags');

    // Catch case with no tags
    if (itemTags != null) {
      if (itemTags.indexOf(tag) < 0) {
        items[i].setAttribute('data-toggle', 'off');
      }
    }
  }
}


// Reset filters
function resetFilter (filter) {
  var items = document.querySelectorAll('.' + filter + ' > li');

  for (var i = 0; i < items.length; i++) {
    items[i].setAttribute('data-toggle', 'on');
  }
}

<button data-filter="ping" data-reset="true">Reset</button>
<button data-filter="ping" data-filter-tag="a">Show A</button>
<button data-filter="ping" data-filter-tag="b">Show B</button>
<button data-filter="ping" data-filter-tag="c">Show C</button>
<button data-filter="ping" data-filter-tag="z">Show Z</button>

<ul id="ddlList" class="ping">
  <li value="3" data-tags="a b">Apple</li>
  <li value="5" data-tags="a f r">Axe</li>
  <li value="8" data-tags="a">Aventador</li>
  <li value="2" data-tags="b g z">Boomerang</li>
  <li value="4" data-tags="b">Bath</li>
  <li value="6" data-tags="b c">Bar</li>
  <li value="7" data-tags="c a">Car</li>
  <li value="1" data-tags="c m t">Carrot</li>
</ul>

这是我的脚本 -

https://jsfiddle.net/areb81/uynsvhr8/1/

标签： javascript

Answer 1

我相信你正在尝试做的事情。在这里，我添加了一些 CSS 来显示切换的内容。我冒昧地使事件处理程序也特定于愿望。

我可以很容易地看到第二次按钮单击将“清除”过滤器的场景 - 或者这些可能是复选框而不是按钮。

其中一些代码也可以合并，但为了清楚我所做的重构，如果稍微少一些，则保留。请注意，您可以代替石灰色设置display:none;CSS 中的显示

function handlePingClick(e) {
  //same thing  console.log(e.target, this);
  let filter = this.dataset.filter;
  let tag = this.dataset.filterTag;
  filterTag(filter, tag);
}

function handleResetClick(e) {
  let filter = this.dataset.filter;
  resetFilter(filter);
}

// Filter tag
function filterTag(filter, tag) {
  let items = document.querySelectorAll('.' + filter + ' > li');

  for (let i = 0; i < items.length; i++) {
    let itemTags = items[i].dataset.tags;
    // Catch case with no tags
    if (!!itemTags && itemTags.length > 0 && itemTags.indexOf(tag) < 0) {
      items[i].dataset.toggle = 'off';
    }
  }
}

// Reset filters
function resetFilter(filter) {
  let items = document.querySelectorAll('.' + filter + ' > li');
  for (var i = 0; i < items.length; i++) {
    items[i].dataset.toggle = 'on';
  }
}

const filterButtons = Array.from(document.querySelectorAll('[data-filter-tag]'));
for (const btn of filterButtons) {
  btn.addEventListener('click', handlePingClick);
}
const resetButton = Array.from(document.querySelectorAll('[data-reset]'));
for (const btn of resetButton) {
  btn.addEventListener('click', handleResetClick);
}

[data-toggle="off"] {
  color: blue;
}

[data-toggle="on"] {
  color: lime;
}

<button data-filter="ping" data-reset="true">Reset</button>
<button data-filter="ping" data-filter-tag="a">Show A</button>
<button data-filter="ping" data-filter-tag="b">Show B</button>
<button data-filter="ping" data-filter-tag="c">Show C</button>
<button data-filter="ping" data-filter-tag="z">Show Z</button>

<ul id="ddlList" class="ping">
  <li value="3" data-tags="a b">Apple</li>
  <li value="5" data-tags="a f r">Axe</li>
  <li value="8" data-tags="a">Aventador</li>
  <li value="2" data-tags="b g z">Boomerang</li>
  <li value="4" data-tags="b">Bath</li>
  <li value="6" data-tags="b c">Bar</li>
  <li value="7" data-tags="c a">Car</li>
  <li value="1" data-tags="c m t">Carrot</li>
</ul>