检查数组是否至少有一个条件，并且以后再检查不要覆盖它

debugcn 发表于 Dev

丹尼

问题

for循环正在检查数组以查看其是否至少符合一个条件。此for循环中的后续迭代似乎覆盖了原始匹配项。

题

如何检查数组以查看其是否至少符合一个条件，并且此检查的后续迭代没有覆盖结果（因此变为false）？

目标

随附的代码段应呈现与数组对应的<article>元素在其对应数组中具有任何匹配项的元素。因为包含，这意味着澳大利亚和墨西哥元素应显示-因为它们两者都包含与currentItemTagsshowOnlyItemsWithTheseTagsshowOnlyItemsWithTheseTags["digital", "2016"]currentItemTagsshowOnlyItemsWithTheseTags

方法

以下代码旨在执行以下操作：

遍历每个元素pageItem（三个<article>元素）
为currentItemTags阵列准备阵列pageItem
遍历showOnlyItemsWithTheseTags数组
检查currentItemTags与showOnlyItemsWithTheseTags
根据是否存在匹配项分别应用一个隐藏/显示CSS类

我怀疑步骤5出了问题。我尝试未成功应用.some（）和.filter（）方法-无法在这种情况下使这些方法起作用。

// Set up
const pageItems = document.querySelectorAll("main article");

// Changing items in this array should show or hide page items
const showOnlyItemsWithTheseTags = [
  "digital",
  "2016"
];

for (let i = 0; i < pageItems.length; i++) {
  // Access each item
  const currentItem = pageItems[i];

  // Manually deconstruct this item's dataset into one array
  const currentItemTags = [];
  currentItemTags.push(
    currentItem.getAttribute("data-type"),
    currentItem.getAttribute("data-year"),
    currentItem.getAttribute("data-topic"),
    currentItem.getAttribute("data-country")
  );


  // Where I think the problem is:

  // Check this item's dataset array if it contains a matche with showOnlyItemsWithTheseTags
  for (let j = 0; j < showOnlyItemsWithTheseTags.length; j++) {
    
    if (currentItemTags.includes(showOnlyItemsWithTheseTags[j])) {
      // currentItemTags array contains a match with showOnlyItemsWithTheseTags
      // Show this item
      currentItem.classList.remove("hideItem");
      currentItem.classList.add("showItem");
    } else {
      // currentItemTags does not contain ANY match with showOnlyItemsWithTheseTags
      // Hide this item
      currentItem.classList.remove("showItem");
      currentItem.classList.add("hideItem");
    }
  }
}

/* Set up */
body {
  margin: 1rem;
  font-family: sans-serif;
}

article {
  background-color: tomato;
  padding: 1rem;
  margin-bottom: 1rem;
  font-weight: 700;
  font-size: 1.5rem;
}

/* Classes references in JS */
.showItem {
  display: auto;
  /* back to default */
}

.hideItem {
  display: none;
}

<main>
  <article data-type="analog" data-year="2016" data-topic="food" data-country="australia">Analog, 2016, Food, Australia</article>
  <article data-type="digital" data-year="2017" data-topic="art" data-country="mexico">Digital, 2017, Art, Mexico</article>
  <article data-type="analog" data-year="2020" data-topic="music" data-country="poland">Analog, 2020, Music, Poland</article>
</main>

当前结果

仅<article>显示澳大利亚元素。墨西哥也应该展示。

乔乔先生

在JS中获取所有数据属性的最简单方法是 Object.values(element.dataset)

但是如果您还有其他无关紧要的数据属性，
listArray = [element.dataset.type, element.dataset.year, element.dataset.topic, element.dataset.country ]

验证2个数组是否具有一些公共元素的方法：
if (arr1.some(key=>arr2.includes(key)))

完整的代码：

const pageItems = [...document.querySelectorAll('main article')]
                    .map(el=>({el:el, keys:Object.values(el.dataset)}) );

function articleFiltering( showOnly )
  {
  pageItems.forEach(item=>
    {
    if (showOnly.some(key=>item.keys.includes(key))) 
      { item.el.classList.remove('hideItem') }
    else
      { item.el.classList.add('hideItem')    }
    }) 
  }

const showOnlyItemsWithTheseTags = [ 'digital', '2016' ]; 

articleFiltering( showOnlyItemsWithTheseTags )

body {
  margin: 1rem;
  font-family: sans-serif;
  }
article {
  background-color: tomato;
  padding: 1rem;
  margin-bottom: 1rem;
  font-weight: 700;
  font-size: 1.5rem;
  }
.hideItem {
  display: none;
  }

<main>
  <article data-type="analog"  data-year="2016" data-topic="food"  data-country="australia" > Analog, 2016, Food, Australia </article>
  <article data-type="digital" data-year="2017" data-topic="art"   data-country="mexico"    > Digital, 2017, Art, Mexico    </article>
  <article data-type="analog"  data-year="2020" data-topic="music" data-country="poland"    > Analog, 2020, Music, Poland   </article>
</main>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。

编辑于2021-04-2

我来说两句

0条评论

登录后参与评论

来自分类Dev

Related 相关文章

文章