Question

我试图点击在同一页面上显示编辑屏幕的按钮。

EG。单击＆＃34;编辑用户＆＃34;，在同一页面上弹出编辑屏幕，无需重定向，更改名称，保存。此按钮不会重定向到新页面。

此按钮的代码如下：

<a href="javascript:;" data-id="29508" class="btn btn-xs btn-inverse btn-modify"><i class="fa fa-pencil"></i> Edit</a>

出于某种原因，我可以点击本网站上的所有其他按钮以相同的形式点击，但我无法点击此按钮。根本没有ID，因此通过类名调用是我所知道的唯一其他方法。

这是我尝试过的：

setTimeout(function() {
   document.getElementsByClassName(" btn btn-xs btn-inverse btn-modify")[0].click();
}, 3000);

我尝试使用一些Jquery，但没有运气。我做错了什么，或者这就是我能做的一切吗？我点击的其他按钮或者将我重定向到另一个站点，或者只是在同一个屏幕上显示了一些信息。

提前致谢。

编辑：

似乎当我尝试迭代不同的按钮时，谁都有类似的起始类名，我可以迭代并单击除编辑按钮之外的每个按钮。因此，可以安全地假设这不是代码的问题，所以感谢大家的帮助和建议。

编辑＃2：

以下是所有三个按钮的代码：

 <div class="btn-group"><a href="https://google.com" target="_blank" class="btn btn-xs btn-inverse"><i class="stm stm-goog"></i>&nbsp;&nbsp</a>

<a href="javascript:;" data-id="29508" class="btn btn-xs btn-inverse btn-modify"><i class="fa fa-pencil"></i> Edit</a>

<a href="javascript:;" data-page-modal="https://*randomwebsite*.com/manage/stats/301&amp;q=11" class="btn btn-xs btn-inverse"><i class="fa fa-bar-chart"></i></a><button type="submit" class="btn btn-xs btn-danger btn-submit"><i class="fa fa-trash-o"></i></button></div>

Answer 1

如果你想获取拥有所有类的元素，请尝试：

<强> JQuery的

$(".btn.btn-xs.btn-inverse.btn-modify")

普通JavaScript

document.querySelectorAll(".btn.btn-xs.btn-inverse.btn-modify")

在space选择器中的类名之间给出css like意味着（下一个）是任何深度的嵌套元素。使用.来表示它的一个类，并将它们一起编写（没有space），你正在搜索具有所有语言的元素。并且getElementsByClassName不是css like选择器，它只能使用类名和所有具有该类的元素。

Answer 2

因为您尝试按类选择元素，所以需要遍历元素。所以如果你想使用jQuery，你会这样做：

$(".btn-modify").each(function(){

    $(this).click(function(){

    your code here

    });

});

Answer 3

按类搜索元素时，最好使用：

document.querySelector();  // Finds first matching element only

和

document.querySelectorAll(); // Finds all matching elements

而不是document.getElementsByClassName()，因为这会返回“实时节点列表”并阻碍性能。

使用这些方法搜索类时，请记住包含点（.）以表示类，并且在使用多个类时，请不要包含空格。这些空格仅在设置多个类时使用。

此外，如果只有一个类对您要查找的元素是唯一的，则只需搜索该类。

最后，仅使用a元素进行导航。如果您只需要点击某些内容，几乎任何对象都可以拥有click事件处理程序。

var edit = document.querySelector(".btn-modify");

edit.addEventListener("click", function(){ console.log("clicked")});

setTimeout(function() {
   edit.click();
}, 3000);

// Addtional test
var edit = document.querySelectorAll(".btn.btn-xs.btn-inverse")[1];

edit.addEventListener("mouseover", function(){
  console.log("moused over");
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="btn-group">
   <a href="https://google.com" target="_blank" class="btn btn-xs btn-inverse">
     <i class="stm stm-goog">X</i>&nbsp;&nbsp; <!-- <-- You missed a semi-colon here. -->
   </a>
   <a href="#" data-id="29508" 
      class="btn btn-xs btn-inverse btn-modify">
     <i class="fa fa-pencil"></i> Edit
   </a>
   <a href="#" data-page-modal="https://*randomwebsite*.com/manage/stats/301&amp;q=11" 
      class="btn btn-xs btn-inverse">
     <i class="fa fa-bar-chart">X</i>
   </a>
   <button type="button" class="btn btn-xs btn-danger btn-submit"><i class="fa fa-trash-o"></i>TEST</button></div>

按类名使用JavaScript / Jquery单击按钮/ href

3 个答案: