Question

我想得到被压元素的id。

我知道这是一个非常常见的问题，但我不想 jquery 中的解决方案（我试图尽可能少地使用它）我不能修改html，假设是这样的：

<p id='123' class='my_class'>x</p>

我无法创建类似的东西：

<p id='123' class='my_class' onclick='console.log(this.id + " pressed");'>x</p>

这是我个人的尝试：

$(document).on('click', '.my_class', this.id, function (id) {
    console.log( id + " pressed!");
});

但我一直这样做：

[object Object] pressed!

Answer 1

你几乎是对的。使用以下代码：

$(document).on('click', '.my_class', function () {
  console.log( this.id + " pressed!");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id='123' class='my_class'>x</p>

<强>解释

您不应该使用this发送第三个参数，因为它不是上下文的。 .on的语法是：

.on( events [, selector ] [, data ], handler )

您可以完全忽略第三个选项，这无关紧要。总是，在函数内部，this将指向当前元素，事件被触发。

在您的代码中，您将id作为参数传递给回调函数，即event（EventObject）。这就是你得到[Object object]的原因。

希望它有意义。

Answer 2

＆＃13;

var elems = document.getElementsByClassName("my_class");
for (var i = 0; i < elems.length; i++) {
   elems[i].addEventListener('click', function() {
      console.log(this.id + " pressed");
   });
}

＆＃13;

这是没有jquery的解决方案。

Answer 3

参数中的

id指向event对象，将其设为

$(document).on('click', '.my_class', this.id, function (id) {
    console.log( id.target.id + " pressed!");
});

或

$(document).on('click', '.my_class', this.id, function (e) {
    console.log( e.target.id + " pressed!");
});

使用元素类获取元素id

3 个答案: