javascript - 使用脚本单击基于 div id 和值的按钮

Question

我有以下情况。我需要根据其id模拟一个按钮单击div下的关闭值按钮

<div id="deviceControls1">
<button value="Off">Off</button>
<button value="On" class="active">On</button>
</div>

<div id="deviceControls2">
<button value="Off">Off</button>
<button value="On" class="active">On</button>
</div

我知道这不是有效代码，但换句话说 id 如下：

 document.getElementById('deviceControls2').getElementsByValue('Off').click();

我不知道如何使用 javascript 来获得这个结果

Answer 1

使用javascript，试试这个：

var buttons = document.getElementById('deviceControls2').getElementsByTagName('button');
for (var i = 0; i < buttons.length; i++) {
    if (buttons[i].value == 'Off') { 
        buttons[i].click();
    }
}

使用 jQuery（因为你已经标记了它）：

$('#deviceControls2').children('button[value="Off"]').click();

Answer 2

您已经包含了 jQuery 标签，因此如果您使用 jQuery，您可以执行以下操作：

$('#deviceControls2 > button[value="Off"]').click();

Answer 3

您可能会发现此链接很有用：创建和触发事件 - Web 开发人员指南 | MDN

例如，要模拟在 stackoverflow 中单击“标签”链接，您可以这样做

  var event = new MouseEvent('click', {
    'view': window,
    'bubbles': true,
    'cancelable': true
  });
var navTags = document.getElementById('nav-tags'); 
var canceled = !navTags.dispatchEvent(event);

---

这篇文章已经过编辑，下面是我使用旧 API 的旧答案。

您可以执行以下操作：

var event = document.createEvent("MouseEvents");
event.initEvent('click', true, true);
var element =  document.getElementById('deviceControls2').getElementsByValue('Off');
element.dispatchEvent(event);