Question

我正在尝试创建一个函数，该函数将根据按钮单击值删除对象

但是我无法解决的是如何使用addEventListener传递参数，我还想知道是否可以在过滤器函数中使用if else。

var Button1 = document.getElementById('button1');
Button1.addEventListener("click", removeBuild);

var Button2 = document.getElementById('button2');
Button2.addEventListener("click", removeBuild);

function removeBuild(buttonValue) {
  var builds = network.ui.build;
  Object.keys(builds).filter(function(e) {
    if (buttonValue == 1) {
      return document.querySelector(`input[value=${builds[e].type}]`).checked; // Return all checked checkboxes 
    } else {
      return "BlockStash" !== builds[e].type; // Return all - The BlockStash 
    }
  }).forEach(function(i) {
    network.sendRpc({
      name: "Remove",
      id: builds[i].id
    })
  })
}

按钮：

<button id="button1" style="width: 45%;" value="1">SELL CHECKED</button>
<br>
<button id="button2" style="width: 45%;" value="2">SELL ALL</button>

Answer 1

您可以使用包装函数将参数传递给该函数

var Button1 = document.getElementById('button1');
Button1.addEventListener("click",() => removeBuild(1));

var Button2 = document.getElementById('button2');
Button2.addEventListener("click",() => removeBuild(2));

可以在filter()中使用其他方法，但是我宁愿创建一个函数对象。

function removeBuild(buttonValue) {

  var builds = network.ui.build;
  const obj = {
     1:e => document.querySelector(`input[value=${builds[e].type}]`).checked,
     2:e => "BlockStash" !== builds[e].type;
  }
  Object.keys(builds).filter(e => obj[buttonValue](e)).forEach(function(i) {
    network.sendRpc({
      name: "Remove",
      id: builds[i].id
    })
  })
}

Answer 2

removeBuild将收到一个Event作为其第一个参数。您需要从事件中提取originalTarget：

function removeBuild(evt) {
  const element = evt.originalTarget;
  ...
  if (element.value === '1') {
    ....
  }
  ...
}

Answer 3

传递给处理程序的第一个参数将是click事件，该事件具有target属性，该属性将引用clicked元素。因此，您只需从value中提取target。

请注意，按钮的value将是字符串，而不是数字。

console.log(typeof document.querySelector('#button1').value);

<button id="button1" style="width: 45%;" value="1">SELL CHECKED</button>

您也可以使用Object.values而不是Object.keys来减少很多语法干扰：

function removeBuild(event) {
  const buttonValue = event.target.value;
  var builds = network.ui.build;
  Object.values(builds).filter(function(val) {
    if (buttonValue === '1') {
      return document.querySelector(`input[value=${val.type}]`).checked; // Return all checked checkboxes 
    } else {
      return "BlockStash" !== val.type; // Return all - The BlockStash 
    }
  }).forEach(function(val) {
    network.sendRpc({
      name: "Remove",
      id: val.id
    })
  })
}

通过参数取决于按钮单击addEventListener

3 个答案: