英文:
Can I get checkboxes by ID and toggle classes without having repetitive classes & functions?
问题
我正在切换表格上的类，以隐藏特定列，基于用户在表格上方选择的复选框。复选框具有ID "product_1"、"product_2" 等。
表格中有4列，所以我创建了4个函数来进行切换：
const toggleFirst = document.getElementById('product_1').addEventListener('click', () => {
document.querySelector('#compare-table').classList.toggle('tb-compare-hide-1');
});
const toggleSecond = document.getElementById('product_2').addEventListener('click', () => {
document.querySelector('#compare-table').classList.toggle('tb-compare-hide-2');
});
const toggleThird = document.getElementById('product_3').addEventListener('click', () => {
document.querySelector('#compare-table').classList.toggle('tb-compare-hide-3');
});
const toggleFourth = document.getElementById('product_4').addEventListener('click', () => {
document.querySelector('#compare-table').classList.toggle('tb-compare-hide-4');
});
然后，切换的类控制显示/隐藏。
我已经实现了这个功能，但我有4个CSS类和4个JS函数，它们基本上都在不同的复选框上执行相同的操作，只是与不同的类相关联。
我可以通过更少的重复类和函数来实现这个吗？
英文:
I am toggling classes on a table to hide specific columns, based on checkboxes that are selected by the user above the table. The checkboxes have IDs "product_1", "product_2" etc.
There are 4 columns in the table, so I made 4 functions that do the toggling:
const toggleFirst = document.getElementById('product_1').addEventListener('click', () => {
document.querySelector('#compare-table').classList.toggle('tb-compare-hide-1');
});
const toggleSecond = document.getElementById('product_2').addEventListener('click', () => {
document.querySelector('#compare-table').classList.toggle('tb-compare-hide-2');
});
const toggleThird = document.getElementById('product_3').addEventListener('click', () => {
document.querySelector('#compare-table').classList.toggle('tb-compare-hide-3');
});
const toggleFourth = document.getElementById('product_4').addEventListener('click', () => {
document.querySelector('#compare-table').classList.toggle('tb-compare-hide-4');
});
The classes that are toggled then control the showing/hiding.
I have this working, but I have 4 CSS classes, and 4 JS functions, that are basically doing the same thing but with a different checkbox relating to a different class.
Can I achieve this with fewer repetitive classes and functions?
答案1
得分: 1
你可以移除复选框中的ID，改用类来代替。要将复选框映射到列，可以使用data属性。
<input type="checkbox" class="product" data-column-number="1">
<input type="checkbox" class="product" data-column-number="2">
<input type="checkbox" class="product" data-column-number="3">
<input type="checkbox" class="product" data-column-number="4">
const elementCompareTable = document.querySelector('#compare-table');
document.querySelector('.product').addEventListener('click', (event) => {
const numberTarget = event.target.dataset.columnNumber;
elementCompareTable.classList.toggle(`tb-compare-hide-${numberTarget}`);
});
英文:
You can remove the ID from the checkboxes and use classes instead. To map the checkboxes to the column you can use the data attribute`
<input type="checkbox" class="product" data-column-number="1">
<input type="checkbox" class="product" data-column-number="2">
<input type="checkbox" class="product" data-column-number="3">
<input type="checkbox" class="product" data-column-number="4">
const elementCompareTable = document.querySelector('#compare-table');
document.querySelector('.product').addEventListener('click', (event) => {
const numberTarget = event.target.dataset.columnNumber;
elementCompareTable.classList.toggle(`tb-compare-hide-${numberTarget}`);
});
答案2
得分: 0
你在使用元素之前应该先检查它是否存在。
const compareTable = document.querySelector('#compare-table');
let arr = [], el;
const foo = (el, i) => {
if (el) {
el.addEventListener("click", () => {
compareTable.classList.toggle(`tb-compare-hide-${i}`);
})
arr.push(el);
}
}
if (compareTable) {
for (let i=1; i<5; i++) {
el = document.getElementById(`product_${i}`);
foo(el, i);
}
}
// 然后你可以使用数组索引引用这些元素
英文:
You should check for the existence of an element before trying to use it.
const compareTable = document.querySelector('#compare-table');
let arr = [], el;
const foo = (el, i) => {
if (el) {
el.addEventListener("click", () => {
compareTable.classList.toggle(`tb-compare-hide-${i}`);
})
arr.push(el);
}
}
if (compareTable) {
for (let i=1; i<5; i++) {
el = document.getElementById(`product_${i}`);
foo(el, i);
}
}
// you can then use the array indexes to reference the elements
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论