按类名单击带有JavaScript/Jquery的按钮/href

我正在尝试单击一个按钮，在同一页面上显示一个编辑屏幕

例如，点击“编辑用户”，编辑屏幕在同一页面上弹出，无需重定向、更改名称、保存。此按钮不会重定向到新页面

此按钮的代码如下所示：

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

我也尝试过使用一些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>

---

如果要获取包含所有类的元素，请尝试以下操作：

JQuery

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

普通JavaScript

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

---

在类css的选择器中，在类名之间提供一个

空格

，这意味着（下一个）是任何深度的嵌套元素。使用

指示它是一个类，并将它们写在一起（没有

空格

），您正在搜索包含所有类的元素。而且

getElementsByClassName

不是一个类似于

css的

选择器，它只能接受一个类名和所有具有该类的元素。

因为您试图按其类选择元素，所以需要在元素之间循环。 因此，如果您想使用jQuery，您可以这样做：

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

    $(this).click(function(){

    your code here

    });

});

---

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

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

及

而不是

document.getElementsByClassName（）

，因为这会返回“活动节点列表”并影响性能

使用这些方法搜索类时，请记住包含点（

）以表示类，并且在使用多个类时，不要包含空格。空间仅在设置多个类时使用

此外，如果只有一个类对于您希望查找的元素是唯一的，那么您只需要搜索这一个类

最后，仅使用

a

元素进行导航。如果您只是需要单击一些东西，那么几乎任何对象都可以有

click

事件处理程序

var edit=document.querySelector（“.btn modify”）；
edit.addEventListener（“单击”，function（）{console.log（“单击”）}）；
setTimeout（函数（）{
编辑。单击（）；
}, 3000);
//附加试验
var edit=document.queryselectoral（“.btn.btn xs.btn inverse”）[1]；
edit.addEventListener（“mouseover”，function（））{
控制台日志（“鼠标悬停”）；
});

测试
而不是a-tag，您可以使用button标记来表示buttonuse
javascript://
在herfOh中，我看到了。是的，我以为你总是要在中间留出空间，但还是不行。具有完全相同的JQuery代码，但nothing@Tony我在开始时错过了一个
，我编辑了答案，现在你可以再试一次：）非常希望它工作，但没有：/我觉得这里几乎每个人的建议都应该工作。我可以点击网站上的所有按钮，它们的形式完全相同，我只是不能点击编辑按钮。可能是点击，你是如何验证它没有被点击的？当你点击时，同一页上的一个小屏幕打开（不是新窗口），允许你编辑信息，然后保存。例如，可以把它想象成在Facebook上编辑聊天的通知设置。不过，由于OP将其设计为一个按钮，所以最好使用
按钮
：）。不：/我注意到了一些奇怪的事情。所以我提到我可以点击其他按钮，这些类被称为“btn btn xs btn inverse”。我可以通过增加按钮来单击每个按钮，但是当涉及到每个编辑按钮时，它什么也不做。有可能你不能点击它吗？听起来很奇怪，但不知道为什么不然就不行了work@MikeMcCaughan对我的回答只是试图说明几乎任何可见元素都可以成为“按钮”。@Tony你必须向我们展示所有相关代码才能确定，但这是正确的技术。哦，很抱歉，没有看到你的评论。这几乎是所有的代码，只是我上面为不同按钮输入的代码的副本。是的，每个人似乎都给出了基本相同的代码，所以可以安全地假设代码没有问题。无论如何谢谢你
document.querySelector();  // Finds first matching element only

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