使用jQuery获取li元素value/id时返回undefined的问题

问题描述 #

尝试用jQuery实现点击<li>元素时获取其value或id属性值，但所有尝试均返回undefined。相关代码如下：

HTML代码 #

<ul id="list" class="content-ul">
    <li value="0"><img src="/image0.png" /></li>
    <li value="1"><img src="/image1.png" /></li>
    <li value="2"><img src="/image2.png" /></li>
    <li value="3"><img src="/image3.png" /></li>
</ul>

JavaScript代码 #

$( '#list li' ).click( ( event ) => {
    var value = $(this).attr('value');
    alert(value); // 返回undefined
} );

试过this.id、$(this).id，给img标签添加id和value属性，给li标签添加id属性，结果仍返回undefined。

解决方案 #

1. 修复箭头函数的this指向问题 #

箭头函数不会绑定自身的this，它会继承外层作用域的this，导致这里的this不是点击的<li>元素。有两种修复方式：

方式一：改用普通函数

$( '#list li' ).click( function( event ) {
    var value = $(this).attr('value');
    alert(value);
} );

方式二：通过事件对象获取目标元素

$( '#list li' ).click( ( event ) => {
    // currentTarget确保获取绑定事件的li元素（而非内部img）
    var value = $(event.currentTarget).attr('value');
    alert(value);
} );

2. 改用符合规范的自定义属性 #

<li>不是表单元素，使用value属性不符合HTML规范。建议使用data-*自定义属性存储数据：

修改后的HTML

<ul id="list" class="content-ul">
    <li data-value="0"><img src="/image0.png" /></li>
    <li data-value="1"><img src="/image1.png" /></li>
    <li data-value="2"><img src="/image2.png" /></li>
    <li data-value="3"><img src="/image3.png" /></li>
</ul>

获取属性值的代码

$( '#list li' ).click( function( event ) {
    var value = $(this).data('value');
    alert(value);
} );

3. 正确获取id属性的方式 #

如果给<li>添加id属性，比如：

<li id="item0"><img src="/image0.png" /></li>

正确的获取方式为：

// 原生JS方式
var id = this.id;
// jQuery方式
var id = $(this).attr('id');

注意：$(this).id是错误写法，jQuery对象没有直接的id属性，必须使用attr('id')或prop('id')。

内容的提问来源于stack exchange，提问作者Vardan Betikyan