无法使用jQuery检索属性
问题描述:
我有以下点击功能。无法使用jQuery检索属性
$(".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>
我不明白为什么我没有得到属性“价值”正确记录。
答
$(".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>
答
- 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>
答
您可以使用数据属性用于获取值获取的值。请检查下面的例子将为你工作。
<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'));
});
});
答
日志显示“未定义”。因为它表明一个变量没有被赋值。
因此,您必须使用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>
答
在这里,你去了一个解决方案
$(".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>
希望这会帮助你。
'value'是一个div元素的非标准属性,所以它可能不会映射到'.value'属性。你有没有尝试过使用'data-value'属性来取得'this.getAttribute('data-value')'的值?你为什么要将点击处理程序绑定到div?如果用户没有鼠标或其他指针设备,他们将无法使用您的页面。 – nnnnnn