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

所以您只需要设置：

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;}"});
    });
  };

L40C.onchange = swap;
L50C.onchange = swap;

或者您可以遍历对象数组并在那里进行设置：

var arr = [L40C, L50C];

for(let i = 0; i < arr.length; i++){
  arr[i].onchange = swap;
}

Answer 2

看起来像数字，就像40中的L40C.onchange每次都会改变，所以我将创建一个包含所有此类数字的数组，然后遍历它们并分配适当的{{ 1}}。但是您需要一个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;}'} ); }); }; });处理程序的参数是事件，而不是 element 。 onchange是指触发事件的元素。

使用JS函数代替重复的代码

2 个答案: