知道如何将此 jQuery 更改为 ES6 吗?

Any idea how I can change this jQuery into ES6?

我有这段代码

$( ".asset-type-select" ).change(function() {
  var selectedEventType = this.options[this.selectedIndex].value;
  if (selectedEventType == "all") {
    $('.asset-type div').removeClass('hidden');
  } else {
    $('.asset-type div').addClass('hidden');
    $('.asset-type div[data-eventtype="' + selectedEventType + '"]').removeClass('hidden');
  }
});

并且它需要是原版的 JS/ES6,因为 jQuery 不再存在于系统中...关于如何还原它的任何想法

我已经搞定了,但还是不行:/

const assetChoose = document.getElementById('asset-type-select');
const filterBy = document.querySelectorAll('.asset-type div');
assetChoose.addEventListener('change', () => {
  const selectedAssetType = assetChoose.options[assetChoose.selectedIndex].value;
  if (selectedAssetType === 'all') {
    for (let i = 0; i < filterBy.length; i++) { // eslint-disable-line no-plusplus
      filterBy[i].classList.remove('hidden');
    }
  } else {
    for (let j = 0; j < filterBy.length; j++) { // eslint-disable-line no-plusplus
      filterBy[j].classList.add('hidden');
    }
    const hiddenDiv = document.querySelectorAll(`.asset-type div[data-assettype="${selectedAssetType}"]`);
    for (let k = 0; k < hiddenDiv.length; k++) { // eslint-disable-line no-plusplus
      hiddenDiv[k].classList.remove('hidden');
    }
  }
});

<select id="asset-type-select">
  <option value="all" selected="selected">All</option>
  <option value="Science">Science</option>
  ...
</select>

<div class="asset-type">
  <div data-assettype="Science">
    ...
  </div>
  <div>...</div>

坦率地说,我认为这可能会更好,但我不知所措...我也想摆脱 i++ 类型引用。

代码似乎 运行 但没有抛出任何错误,但也没有按预期执行...

如有任何想法,我们将不胜感激。

这段代码对我有用

<select id="asset-type-select">
 <option value="all" selected="selected">All</option>
 <option value="Science">Science</option>
 ...
</select>

<div class="asset-type">
  <div data-assettype="Science">...</div>
  <div>...</div>
</div>

<script>
  const assetChoose = document.getElementById("asset-type-select");
  const filterBy = document.querySelectorAll(".asset-type div");
  assetChoose.addEventListener("change", () => {
    const selectedAssetType =
      assetChoose.options[assetChoose.selectedIndex].value;
    if (selectedAssetType === "all") {
      filterBy.forEach((div) => div.classList.remove("hidden"));
    } else {
      filterBy.forEach((div) => div.classList.add("hidden"));
      const hiddenDiv = document.querySelectorAll(
        `.asset-type div[data-assettype="${selectedAssetType}"]`
      );
      hiddenDiv.forEach((div) => div.classList.remove("hidden"));
    }
  });
</script>