javascript - 使用JS函数代替重复代码

Question

我知道这应该很容易..但我仍在学习 JS :)

这段代码工作正常，但目前我必须重复大约 20 次，只需更改 L50C 对象和 xp_50...

let L50C = document.getElementById('lvl50');
chrome.storage.sync.get('L50color', function(data) {L50C.setAttribute('value', data.L50color);
});
let L60C = document.getElementById('xp_60');
chrome.storage.sync.get('L60color', function(data) {L60C.setAttribute('value', data.L60color);
});

L40C.onchange = function(element) {
    chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
      chrome.tabs.insertCSS(
          tabs[0].id,
          {code: ".xp_40 {border: 1px solid " + element.target.value + " !important;} .xp_40 .icon {color: " + element.target.value + " !important;}"});
    });
  };
L50C.onchange = function(element) {
    chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
      chrome.tabs.insertCSS(
          tabs[0].id,
          {code: ".xp_50 {border: 1px solid " + element.target.value + " !important;} .xp_50 .icon {color: " + element.target.value + " !important;}"});
    });
  };

(我使用#60来测试) 所以..如果我像这样更改 id="xp_60"...

<div class="lvl_inp_cont">Level 60: <input id="xp_60" type="text" class="lvl_input" maxlength="7"></div>

我可以调用一个函数来重复......像这样:

L60C.onchange = swap(element);

function swap(element) {
    chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
      chrome.tabs.insertCSS(
          tabs[0].id,
          {code: "." + element.id + " {border: 1px solid " + element.target.value + " !important;} ." + element.id + " .icon {color: " + element.target.value + " !important;}"});
    });
  };

看到了吗，我可以将其设置为一个可重用的代码，而不是所有这些代码吗？我觉得交换函数看起来是正确的(如果不是我可以修复它) - 它只是我如何“调用”或设置 onchange 到该函数？

谢谢!!

编辑:我很接近吗？

const obj = {L40C, L50C, L60C, L70C};

for(let num = 40; num < 150; num+=10) {
    let obj['L' + num + 'C'] = document.getElementById('xp_' + num);
}

Answer 1

看起来数字(例如 L40C.onchange 中的 40)每次都会发生变化，因此我创建一个包含所有这些数字的数组，然后进行迭代覆盖它们并分配适当的 chrome.tabs.query。但您需要一个 LC40、LC50 的对象或数组，而不是数十个单独的变量名称 - 例如:

const obj = { L40C, L50C, ... };

然后，您可以使用变量进行属性访问，并且您可以执行以下操作，而不是 L40C.onchange 和 L50C.onchange:

['40', '50'].forEach((num) => {
  const className = 'xp_' + num;
  obj['L' + num + 'C'].onchange = ({ target }) => {
    chrome.tabs.query({active: true, currentWindow: true}, (tabs) => {
      chrome.tabs.insertCSS(
        tabs[0].id,
        {code: "." + className + ' {border: 1px solid " + target.value + " !important;} .' + className + ' .icon {color: ' + target.value + ' !important;}'}
       );
    });
  };
});

需要注意的是，onchange 处理程序的参数是一个事件，而不是元素。 event.target 指的是触发事件的元素。