各位大神好,
目前在摸索原生Javasrcipt, 用checkbox來控制顯示出來的項目, 使用data-來判斷是否與項目是否符合, 在未符合的加上class "hide"
目前跑單個沒有問題, 但選了第二個checkbox後第一個checkbox就失效了, 摸不著頭緒
想請問如果勾選兩個以上checkbox 要怎麼保留先前的判斷呢?
附上JS碼
const pdItem = document.querySelectorAll('.shopbox');
document.querySelector('.item-container').addEventListener('click', (event) => {
const filterClass = event.target.dataset['name'];
for (var i = 0; i < pdItem.length; i++) {
if (!pdItem[i].classList.contains(filterClass)) {
pdItem[i].classList.add('hide');
} else {
pdItem[i].classList.remove('hide');
}
}
});
小弟第一次發文詢問, 如有不清楚或錯誤的地方,請見諒
這樣很好,
有貼測試網站別人比較方便除錯,
另外你的判斷方式錯了,
我改寫成這樣你看看
document.querySelector('.item-container').addEventListener('click', (event) => {
const check = event.target.checked;
const filterClass = event.target.dataset['name'];
var pdItem = document.querySelectorAll('.shopbox.'+filterClass);
if(check)
{
for (var i = 0; i < pdItem.length; i++)
{
pdItem[i].classList.add('hide');
}
}
else
{
for (var i = 0; i < pdItem.length; i++)
{
pdItem[i].classList.remove('hide');
}
}
});
另外我原本是要用一個list去接所有checked的資料,
後來發現用不到,
又拿掉了.
我這是針對每次事件單獨處理,
沒有去管其他元件發生什麼事.
謝謝, 看了您的code感受到自己複雜化了, 值得好好吸收讓腦袋轉一下,非常好理解
想另外請教,如果依照這個code反過來的判斷方向呢?
意思是:
//用 IIFE 可以避免全域有太多的變數
const updatePdItems = (() => {
// checkbox 的集合
const cbList = document.querySelectorAll('.item-container input[type="checkbox"]');
// name => element 字典
const pdDict = Array.from(cbList).reduce((o, e) => {
o[e.dataset.name] = document.querySelector('.' + e.dataset.name);
return o;
}, {});
//處理 click 的函式
return function (event) {
cbList.forEach(checkbox => {
pdDict[checkbox.dataset.name].classList.toggle('hide', !checkbox.checked);
});
}
})();
//開始時先執行一次,讓畫面的圖片符合 checkbox 的選擇
updatePdItems();
//掛載 click 事件(這邊也可以改用 change 事件)
document.querySelector('.item-container').addEventListener('click', updatePdItems);
jQuery有一個封裝的套件叫做MultiSelect也推薦搭配使用
https://coolmandiary.blogspot.com/2021/03/aspnetdropdownlistjquery.html