Question

我有以下情况。我需要根据其ID

模拟一个div下的off值按钮

<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

我知道这不是有效的代码，但换句话说就像是：

 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

您可能会发现此链接很有用：Creating and triggering events - Web developer guide | MDN

例如，要模拟在stackoverflow中单击“Tags”链接，您可以执行

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

使用脚本单击基于div id和value的按钮

3 个答案: