无法使用jQuery检索属性

Question

我有以下点击功能。

$(".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> 

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

Answer 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>

Answer 2

1. div有没有价值。
2. 使用data-*
3. 使用.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>

Answer 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')); 
}); 
}); 

Answer 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>

Answer 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>

希望这会帮助你。