Javascript在一定条件下的点击按钮功能

Javascript click button function under certain div

本文关键字：按钮 功能 条件下 Javascript      更新时间：2023-09-26

这是一个html页面中的按钮代码

<a class="btn" role="button" href="#">Click me</a>

我有这个javascript代码来点击一个带有特定类的按钮

var clickBtn = document.getElementsByClassName('btn'); 
for(var i=0;i<clickBtn.length;i++)
{ 
clickBtn[i].click(); 
}

这段代码单击所有页面中带有类"btn"的每个按钮。但是在同一个页面中还有一些其他按钮，它们属于同一类。所以我想修改我的javascript代码以点击只有某个分区中的某个按钮。

带有div的代码是

<div class="inside">
<span>
<a class="btn" role="button" href="#">Click me</a>
</span>
</div>

你知道我如何修改javascript代码，只点击div中的按钮吗？？谢谢你抽出时间。

您可以使用querySelectorAll（）

Array.from(document.querySelectorAll('.inside  .btn')).forEach(btn => {      
   alert(btn.innerHTML)
   btn.click();
});

或不带es6:

[].slice.call(document.querySelectorAll('.inside  .btn')).forEach(function(btn) {
    alert(btn.innerHTML)
    btn.click();
});

演示

更新你的评论（你能更新你的代码吗，如果在跨度中有一个id，比如不要点击按钮？）：

[].slice.call(document.querySelectorAll('.inside  .btn')).forEach(function(btn) {
    if (btn.parentNode.id != 'clicked') {
        alert(btn.innerHTML);
        btn.click();
    }
});

或者您可以将querySelectorAll（）与:not条件一起使用以避免if检查：

Array.from(document.querySelectorAll('.inside span:not([id="clicked"]) .btn'))
    .forEach(btn => {
        alert(btn.innerHTML)
        btn.click();
    });

如果您想要一个非jQuery解决方案，可以使用getElementById来获取div，然后使用getElementsByClassName来获取该div中的所有按钮。

var insideDiv = document.getElementById("inside");
var buttonsInsideDiv = insideDiv.getElementsByClassName();

var parentDiv = clickBtn[i].parentNode;
var clickBtn = document.getElementsByClassName('btn'); 
for(var i=0;i<clickBtn.length;i++)
{ 
var parentDiv = clickBtn[i].parentNode;
  if(parentDiv == yourDiv)
   {
    clickBtn[i].click(); 
   } 
}

我不确定，var parentDiv=clickBtn[I]parentNode是否有效。但想法是一样的。

相关文章：