如何在单击复选框时改进和分配 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) {

  const data = e.target.dataset.item;

  config[data] = e.target.checked;

  generatePassword();

}

chkBoxes.forEach(function(checkbox) {

  checkbox.addEventListener('change', handleChange);

})

Answer 2

只是一个一般性的说明，但我会鼓励使用constover ，let除非您有很好的理由重新分配值。除此之外，我将迭代这些元素，forEach而只是使用该数据属性的值作为对象键，就像这样。

const checkboxes = [...document.querySelectorAll('.change-checkbox')]

const config = {

  syms: true,

  nums: true,

  caps: true,

  lows: true

}

checkboxes.forEach(checkbox => {

  const item = checkbox.dataset.item

  checkbox.addEventListener('change', () => {

    config[item] = !config[item]

    generatePassword()

  })

})

Answer 3

您正在尝试设置配置对象的“数据”属性，而不是设置与复选框属性对应的属性。更改以下行

 config.data = !config.data;

到下面访问数据值对应的属性

 config[data] = !config[data];