如何在javascript中隐藏带有data-xxx属性的元素？答案

【问题标题】：How can I hide element with the data-xxx attribute in javascript?如何在javascript中隐藏带有data-xxx属性的元素？
【发布时间】：2021-07-02 13:04:03
【问题描述】：

我想隐藏一个 div，但只是隐藏带有特殊 data-xxx 的 div。

<div data-platform="dinner"  class="product">Dinner</div>
<div data-platform="lunch"  class="product">lunch</div>

注意：

我想隐藏所有“晚餐”的数据平台。

【问题讨论】：

这能回答你的问题吗？ Select all elements with a "data-xxx" attribute without using jQuery
@AnuragSrivastava 这个问题没有用 jQuery 标记。
@Mr.Polywhirl 仔细看看那个标题 :)
@Mr.Polywhirl 是的，这意味着纯 JS，这是骗子提供的
@AnuragSrivastava 因为我只想隐藏数据平台午餐和晚餐应该是可见的

标签： javascript html

【解决方案1】：

纯 CSS

您可以将display 设置为none，以获取等于"dinner" 的platform 的“数据属性”。

div[data-platform="dinner"] {
  display: none;
}

<div data-platform="dinner" class="product">Dinner</div>
<div data-platform="lunch" class="product">Lunch</div>

使用 JavaScript

使用platform“数据属性”过滤所有<div>元素，过滤值为"dinner"的元素，并为它们添加.hidden类。

const form = document.forms['choice-form'];

const isSelectionEmpty = select =>
  (vals => vals.length === 0 || (vals.length === 1 && vals[0] === ''))
  (selectedValues(select));

const selectedValues = select =>
  [...select.selectedOptions].map(({ value }) => value);

const handleMealChange = e => {
  const
    isEmpty = isSelectionEmpty(e.target),
    allowList = selectedValues(e.target);
    
  document.querySelectorAll('div[data-platform]')
    .forEach(div =>
      div.classList.toggle('hidden', !isEmpty &&
        !allowList.includes(div.dataset.platform)));
};

form.elements.meal.addEventListener('change', handleMealChange);

// Alternatively
//document.querySelector('select[name="meal"]')
//  .addEventListener('change', handleMealChange);

.hidden {
  display: none;
}

<form name="choice-form">
  <select name="meal" multiple>
    <option value="" selected></option>
    <option value="breakfast">Breakfast</option>
    <option value="lunch">Lunch</option>
    <option value="dinner">Dinner</option>
  </select>
</form>
<hr />
<div data-platform="dinner" class="product">Dinner</div>
<div data-platform="lunch" class="product">Lunch</div>

【讨论】：

我想用JS来做
当您可以在选择器中指定值时，无需使用filter...此外，这与建议的重复项的答案相同。
当我有 5 个数据列表的东西并且我选择了一个时，我如何隐藏我选择的所有但不隐藏这个？ @Mr.Polywhirl
@NilsVonBismarck 要显示什么，要隐藏什么？
@Mr.Polywhirl 例如我有 3 个 div，每个 div 都有不同的内容，我选择其中一个，例如在选择器中，我只想查看包含此内容的 div。就像 3 div 有食物、乐趣、饮料，我选择乐趣，我只是看到乐趣。

【解决方案2】：

<div data-platform="dinner" class="product">Dinner</div>
<div data-platform="lunch" class="product">Lunch</div>

我想隐藏所有“晚餐”的数据平台。

jQuery 解决方案：

$('.product').each(function(){
  var sData = $(this).data('platform');
  if(sData == 'dinner'){
     $(this).hide();
  }

});

【讨论】：