我有這個代碼塊
$( ".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');
}
});
并且它需要是 vanilla 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 型別參考。
代碼似乎運行但沒有拋出任何錯誤，但也沒有做它打算做的事情......
任何想法將不勝感激。
uj5u.com熱心網友回復：
這段代碼對我有用
<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>
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/313523.html
上一篇：如何在for回圈中洗掉串列的元素
下一篇：使用For回圈創建多個表