无法使用 jQuery 检索属性答案

【问题标题】：Can't retrieve attribute with jQuery无法使用 jQuery 检索属性
【发布时间】：2017-10-16 02:05:54
【问题描述】：

我有如下点击功能。

$(".charPortait").on("click", function(event){
    console.log(this.value);
});

日志显示“未定义”。为了找出它可能无法获得价值的原因，我接下来尝试了这个：

$(".charPortait").on("click", function(event){
    console.log(this);
});

这个日志：

<div id="TomiasPortrait" class="col charPortait" value="Tomias">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed 
    do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>

我不明白为什么我没有正确记录属性“值”。

【问题讨论】：

value 是 div 元素的非标准属性，因此它可能不会映射到 .value 属性。您是否尝试过使用data-value 属性，并使用this.getAttribute('data-value') 获取值？为什么要将点击处理程序绑定到 div？如果用户没有鼠标或其他指针设备，他们将无法使用您的页面。

标签： javascript jquery html attributes console.log

【解决方案1】：

$(".charPortait").on("click", function(event){
    console.log($(this).attr("value"));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div id="TomiasPortrait" class="col charPortait" value="Tomias">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed 
    do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>

【讨论】：

【解决方案2】：

Div 没有价值。
使用data-*
使用.attr(data-*)获取值

$(".charPortait").on("click", function(event){
    console.log($(this).attr('data-value'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="TomiasPortrait" class="col charPortait" data-value="Tomias">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed 
    do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>

【讨论】：

【解决方案3】：

您可以使用数据属性来获取值。请检查下面的示例是否适合您。

<div id="TomiasPortrait" class="col charPortait" data-value="Tomias">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed 
    do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>

$(document).ready(function() {
  $(".charPortait").on("click", function(){
    console.log(this.getAttribute('data-value'));
 });
});

【讨论】：

【解决方案4】：

日志显示“未定义”。因为它表明一个变量没有被赋值。

所以你必须使用attr() 来获取该属性的值。在您的HTML 中，没有value 属性，因此您可以使用data- 然后连接您的数据名称。见下文。

$(".charPortait").on("click", function(){
    console.log($(this).attr('data-value'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

 <div id="TomiasPortrait" class="col charPortait" data-value="Tomias">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed 
    do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>

【讨论】：

【解决方案5】：

给你一个解决方案

$(".charPortait").on("click", function(event){
    console.log($(this).attr('value'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="TomiasPortrait" class="col charPortait" value="Tomias">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed 
    do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>

希望这会对你有所帮助。

【讨论】：