代码之家 › 专栏 › 技术社区 › William

JavaScript如何在函数内循环键值对

javascript

William · 技术社区 · 3 年前

我是JavaScript新手。

我有两个密钥和值对,它们是id:

myselect->myoption
myselect2->myoption2

代码:

  function checkboxStatusChanges() {
    var multiselect = document.getElementById("myselect");
    var multiselectOption = multiselect.getElementsByTagName('option')[0];
  
    var values = [];
    var checkboxes = document.getElementById("myoption");
    var checkedCheckboxes = checkboxes.querySelectorAll('input[type=checkbox]:checked');
  
    for (const item of checkedCheckboxes) {
      var checkboxValue = item.getAttribute('value');
      values.push(checkboxValue);
    }
  
    var dropdownValue = "Nothing is selected";
    if (values.length > 0) {
      dropdownValue = values.join(', ');
    }
  
    multiselectOption.innerText = dropdownValue;
  }

该代码已经使用了一对值myselect->mymotion document.getElementById(“myselect”),我的问题是,如何在代码中编码一个循环,以便在代码中使用这两个对值?

2 回复 | 直到 3 年前

Jordy 3 年前

可以使用对象数组来解决此问题。在内部定义您的配对值 object.selectId 和 object.optionId 并执行forEach为这些对象应用函数,如下所示:

function checkboxStatusChanges() {
    let targetIds = [{
            "selectId": "myselect",
            "optionId": "myoption"
        },
        {
            "selectId": "myselect2",
            "optionId": "myoption2"
        }
    ];
    targetIds.forEach(function(targetId) {
        var multiselect = document.getElementById(targetId.selectId);
        var multiselectOption = multiselect.getElementsByTagName('option')[0];

        var values = [];
        var checkboxes = document.getElementById(targetId.optionId);
        var checkedCheckboxes = checkboxes.querySelectorAll('input[type=checkbox]:checked');

        for (const item of checkedCheckboxes) {
            var checkboxValue = item.getAttribute('value');
            values.push(checkboxValue);
        }

        var dropdownValue = "Nothing is selected";
        if (values.length > 0) {
            dropdownValue = values.join(', ');
        }

        multiselectOption.innerText = dropdownValue;
    });
}

Wyck 3 年前

据我所知,你的职能是 绝对好 照原样,除非你想 参数化 "myselect" 和 "myoption" 像 key 和 value 。所以,您可以在函数级别执行此操作。参数化是JavaScript中函数的一个基本特征,简单来说:

 function checkboxStatusChanges(key, value) {
    var multiselect = document.getElementById(key);
    var multiselectOption = multiselect.getElementsByTagName('option')[0];
  
    var values = [];
    var checkboxes = document.getElementById(value);
    var checkedCheckboxes = checkboxes.querySelectorAll('input[type=checkbox]:checked');
  
    for (const item of checkedCheckboxes) {
      var checkboxValue = item.getAttribute('value');
      values.push(checkboxValue);
    }
  
    var dropdownValue = "Nothing is selected";
    if (values.length > 0) {
      dropdownValue = values.join(', ');
    }
  
    multiselectOption.innerText = dropdownValue;
  }

现在您只需要调用此函数两次,每次调用一次 钥匙 , 价值 一对

以最简单的形式,您现在可以执行以下操作:

checkboxStatusChanges('myselect', 'myoption');
checkboxStatusChanges('myselect2', 'myoption2');

如果您需要一个同时做这两件事的函数,因为它是一个事件处理程序或其他什么,那么这也很容易解决:

function allChanges() {
  checkboxStatusChanges('myselect', 'myoption');
  checkboxStatusChanges('myselect2', 'myoption2');
}

现在我们已经解决了所有这些问题,如果你真的坚持这样做,你可以使用一个循环:

const pairs = [
  ['myselect', 'myoption'],
  ['myselect2', 'myoption2']
];

for (const [key, value] of pairs) {
  checkboxStatusChanges(key, value);
}