知道如何将此 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>
我有这段代码
$( ".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>