Question

我有以下HTML代码段。

<li my-id="10" class="my-class">test-1</li>
<li my-id="15" class="my-class">test-2</li>
<li my-id="20" class="my-class">test-3</li>

任何人都可以帮助我在发生点击事件时如何获取上述一个html元素的id。在解释更多时，我在jquery中有以下代码。当用户点击上面任何一个元素时，我需要提取对应于同一元素的id。我在jQuery中使用以下代码。

$('.my-class').on('click', function(e) {
var ids = e.targetElement.attr('my-id'); 
});

但上面的代码段不起作用。任何人都可以提出更好的方法吗？

Answer 1

尝试通过.attr()调用$(this)。因为.attr()在节点对象的原型中不可用，

$('.my-class').on('click', function(e) {
 var ids = $(this).attr('my-id'); 
});

Answer 2

您需要使用e.currentTarget作为这样的选择器。

＆＃13;

$('.my-class').on('click', function(e) {
 var ids = $(e.currentTarget).attr("my-id");  
 alert(ids)
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li my-id="10" class="my-class">test-1</li>
<li my-id="15" class="my-class">test-2</li>
<li my-id="20" class="my-class">test-3</li>

＆＃13;

Answer 3

attr()是一个jQuery方法，所以你应该在jQuery对象$(this)上调用它：

var ids = $(this).attr('my-id');

如果你想要javascript替代品，你可以使用getAttribute：

var ids = e.target.getAttribute('my-id');

希望这有帮助。

＆＃13;

$('.my-class').on('click', function(e) {
    alert(e.target.getAttribute('my-id')+' ---- '+ $(this).attr('my-id'));
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li my-id="10" class="my-class">test-1</li>
<li my-id="15" class="my-class">test-2</li>
<li my-id="20" class="my-class">test-3</li>

＆＃13;

Answer 4

使用jQuery包装它然后使用attr方法获取所需的属性：

$('.my-class').click(function() {
  var ids = $(this).attr('my-id'); 
});

Answer 5

尝试，使用属性＆＃39; id＆＃39;在你的清单中

<li id="10" class="my-class">test-1</li>
<li id="15" class="my-class">test-2</li>
<li id="20" class="my-class">test-3</li>

在javascript中，this.id

$('.my-class').on('click', function(e) {
 var ids = this.id; 
 alert(ids);
});

包括jquery。例如：https://jsfiddle.net/Cuchu/7h1ecsm7/

在Jquery中选择元素的ID

5 个答案: