如何在单击复选框时改进和分配 var 并修改对象属性？

Question

您好，我正在开发一个创建随机密码的函数，我现在可以正常工作了，但是我想改进一些代码，因为我使用 3 个复选框来包含大写、数字和符号，所以我为一个复选框创建了一个 eventListener，但是我想如果我对所有复选框使用一个类，我可以使用 for () 使用类迭代每个复选框并添加例如 data-item="caps", data-item="nums" & data-item= “syms”获取该属性并修改我的对象，包括默认值为true，当用户单击取消选中一个项目时，添加事件监听器来调用我的函数：

这是我的实际工作代码：

let chkboxUppercase = document.querySelector('#chkboxUppercase');

let chkboxNumbers = document.querySelector('#chkboxNumbers');

let chkboxSymbols = document.querySelector('#chkboxSymbols');

let config = {

    syms: true,

    nums: true,

    caps: true,

    lows: true

}

chkboxUppercase.addEventListener('change', function (e) {

    config.caps = !config.caps;

    generatePassword();

})

chkboxNumbers.addEventListener('change', function (e) {

    config.nums = !config.nums;

    generatePassword();

})

chkboxSymbols.addEventListener('change', function (e) {

    config.syms = !config.syms;

    generatePassword();

})

function generatePassword(){

    //... my function goes here...

}

所以这就是我想要做的：

let chkBoxes = document.querySelectorAll('.change-checkbox');

for (let index = 0; index < chkBoxes.length; index++) {

    chkBoxes[index].addEventListener('change', function (e) {

        let data = chkBoxes[index].getAttribute('data-item');

        config.data = !config.data;

        generatePassword();

    })

}

但不能正常工作就像脚本忽略了我的 var 数据...：https : //prnt.sc/pd771w

如果有人能让我看到我的错误，我将不胜感激，

Answer 1

您可以使用以下方法访问数据属性element.dataset：const chkBoxes = document.querySelectorAll('.change-checkbox');const handleChange = function (e) {&nbsp; const data = e.target.dataset.item;&nbsp; config[data] = e.target.checked;&nbsp; generatePassword();}chkBoxes.forEach(function(checkbox) {&nbsp; checkbox.addEventListener('change', handleChange);})

Answer 2

只是一个一般性的说明，但我会鼓励使用constover ，let除非您有很好的理由重新分配值。除此之外，我将迭代这些元素，forEach而只是使用该数据属性的值作为对象键，就像这样。const checkboxes = [...document.querySelectorAll('.change-checkbox')]const config = {&nbsp; syms: true,&nbsp; nums: true,&nbsp; caps: true,&nbsp; lows: true}checkboxes.forEach(checkbox => {&nbsp; const item = checkbox.dataset.item&nbsp; checkbox.addEventListener('change', () => {&nbsp; &nbsp; config[item] = !config[item]&nbsp; &nbsp; generatePassword()&nbsp; })})

Answer 3

您正在尝试设置配置对象的“数据”属性，而不是设置与复选框属性对应的属性。更改以下行&nbsp;config.data&nbsp;=&nbsp;!config.data;到下面访问数据值对应的属性&nbsp;config[data]&nbsp;=&nbsp;!config[data];