jQuery $(this).val 返回 0

Question

我有一个简单的列表，就像这样：

<ul id="large_box_custom_list">
<li id="8" class="large_box">Item 1</li>
<li id="13" class="large_box">Item 2</li>
</ul>

然后我有一个像这样的jQuery函数：

$(function() { 
$('li.large_box').css('cursor', 'pointer')
.click(function() {
    var show_id = $(this).val();
    alert(show_id);
    });
});

当我点击列表项时，我的警告框显示的是0，而我期望的值应该是8或13。

- JackBurton

Answer 1

因为你应该使用标准DOM元素的id属性。jQuery的.val()方法与元素的ID没有任何关系。

$('li.large_box').css('cursor', 'pointer').click(function ()
{
    var show_id = this.id;
    alert(show_id);
});

- Matt Ball

Answer 2

val()不会返回id。你需要用$(this).attr('id')代替。

- Chris G.

---

jQuery是完全不必要的；this.id就足够了。请参见其他答案中的评论。 - Matt Ball

Answer 3

你做错了。 id 属性应该被用作唯一标识符，而不是数据存储的手段。

此外，.val() 应该用于 input, select, textarea 元素以访问它们当前的值。

如果你需要一个元素的属性，请使用 .attr() 函数。

如果你需要在元素上存储数据，请使用自定义的 HTML5 data- 元素：

<li data-id="8"...
<li data-id="13"...

然后您可以使用.data()函数访问该值：

var listItemIdentifier = $(this).data('id');
console.log( listItemIdentifier );
//should output 8 or 13 depending on which you click on

- zzzzBov

---

现在大多数情况下应使用.prop()而不是.attr()。 - Matt Ball

@MattBall，如果您正在使用1.6+版本的jQuery，那么您说得很好。我经常需要在稍旧的jQuery版本中工作，因此出于习惯我一直在使用attr。 - zzzzBov

属性和特征不应该被交替使用，即使JQuery允许这样做。将属性视为布尔特征，它们倾向于具有相同的名称和值selected="selected"或checked="checked"。 - AlienWebguy

@AlienWebguy，我非常清楚这一点，我曾经使用$(...).is(':selected')和$(...).is(':checked')作为安全检查的方法。当我需要实际属性值时，我使用attr。 - zzzzBov

是的，我的评论实际上是给马特的 :) - AlienWebguy

Answer 4

尝试使用attr()而不是val():

$(function() { 
    $('li.large_box').css('cursor', 'pointer').click(function() {
        var show_id = $(this).attr('id');
        alert(show_id);
    });
});

- Matt Huggins

---

.attr() 对于获取元素的 ID 来说完全是杀鸡焉用牛刀（参见 https://dev59.com/pm445IYBdhLWcg3w4-Be）。-1 - Matt Ball

你下投票否决了一个合理的答案？看起来他想学习jQuery，所以我向他展示了如何在jQuery中实现它。 - Matt Huggins

仅仅因为你可以在 JQuery 中访问 id 属性，并不意味着这就是你应该引用 id 的方式。 - AlienWebguy

Matt，我没有使用你的方法，但是我很感激你的回答，因为我确实是新手，对jQuery和javascript都不太熟悉。 - JackBurton

Answer 5

var show_id = $(this).attr('id');

- Royi Namir

Answer 6

id属性不是value属性。

您可以将其设置为获取id：

$(this).attr("id");

或在HTML中设置该值

<li id="8" value="8" class="large_box">Item 1</li>

这是一个实时示例： http://jsfiddle.net/BBm4R/

- Drake

Answer 7

使用 $(this).attr('id')

<li> 不能使用非标准属性来赋值。

- Jaime