使用 jQuery 的列表项值始终为 0答案

【问题标题】：List item value is always 0 using jQuery使用 jQuery 的列表项值始终为 0
【发布时间】：2015-01-14 15:33:14
【问题描述】：

使用按钮的值填充文本区域的按钮页面。

这适用于按钮项目，但不能让它适用于列表项目。

我必须使用列表项，因为某些按钮有下拉菜单。

jsfiddle 显示警告 0 的列表项，即使它确实有值。

<li class='item_value' value='value'>
  <a href='#'>Click</a>
</li>

<br><br>

<button type='button' class='btn btn-success item_value' value='value2'>Click 2</button>

jQuery：

$(".item_value").on('click',function(){
  alert(this.value);
});

【问题讨论】：

标签： javascript jquery html list

【解决方案1】：

value 不是li 元素的有效属性（除非它在ol 中，但考虑到您的问题以及您拥有的属性值是字符串而不是数字的事实，这似乎不太可能），该标签类型的 DOMElement 也没有 value 属性。

在标记中添加非标准属性会导致页面无效，并可能导致 JS 和 UI 问题。如果要创建自定义属性，请使用data-*：

<li class="item_value" data-value="value">
    <a href="#">Click</a>
</li>

$('.item_value').on('click', function(){
    alert($(this).data('value')); // = 'value'
});

【讨论】：

【解决方案2】：

li 元素没有value 属性。但是，如果您仍然想获得它，请使用 attr 方法：

$( this ).attr( 'value' );

jsFiddle

【讨论】：

抱歉，我没有正确使用您的 jsFiddle，已删除（和评论）反对票 - 并赞成 ;-)

【解决方案3】：

列表项<li> 有一个value，但它只需要数字（注意它们应该在<ol> 中）。您给出了一个字符串（在解释为 0 时），例如：

<li class='item_value' value='1010'>
    <a href='#' value="test">Click</a>
</li>

将显示为1010 的值。您可以通过添加 data- 属性来解决此问题：data-value="someStringHere"

【讨论】：

【解决方案4】：

刚刚将您的this.value 修改为$(this).attr('value')。

完整代码：

$(".item_value").on('click',function(){
    alert($(this).attr('value'));
});

希望有所帮助

【讨论】：