为什么我无法访问html元素的属性值之一，但是我可以使用jQuery访问其他值？

Question

1）为什么我只能访问id属性的值，而其余日志使用此代码未定义？

2）我如何以其他方式访问它们？

 $('.block').click(function() { console.log(this.id); // is defined console.log(this.class); // undefined console.log(this.value) // undefined }); 

 <script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script> <div class="container"> <div class="game-wrap"> <div class="row"> <div class="block" id="block1" value="1"> </div> <div class="block" id="block2" value="2"> </div> <div class="block" id="block3" value="3"> </div> </div> </div> </div> 

Answer 1

使用className属性访问指定元素的class属性。

console.log(this.className);

而且div元素没有value属性，而是使用.textContent / .innerHTML属性

console.log(this.textContent); //this.innerHTML

要存储任意数据，请使用data-*前缀属性，该属性可以使用Element.dataset属性进行访问

<div class="block" id="block2" data-value="2"> 2</div>

 $('.block').click(function() { console.log(this.id); // is defined console.log(this.className); // undefined console.log(this.dataset.value) // undefined //JQuery console.log($(this).prop("id")); console.log($(this).attr("class")); console.log($(this).data("value")); }); 

 <script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script> <div class="block" id="block1" data-value="1">1 </div> <div class="block" id="block2" data-value="2"> 2</div> <div class="block" id="block3" data-value="3"> 3</div> 

Answer 2

这节课

class是Javascript中的保留关键字，当用作对象属性时，旧版本的IE无法正确解释它。 因此，与HTML标记的class属性对应的Element属性为className 。
换句话说，它应该是this.className

仅供参考，在<label>标签上使用for属性是相同的，相应的属性是htmlFor

这个值

value属性仅适用于表单元素。 value属性对于其他标签而言是非标准的，但是您仍然可以通过调用this.getAttribute('value')来访问属性值。 但是，像这样的自定义属性应以data-作为前缀，因此应为

<div class="block" id="block1" data-value="1"> </div>

和

this.getAttribute('data-value')或$(this).attr('data-value')

Answer 3

尝试这个

上课

console.log($(this).attr("class"));

获得价值

console.log($(this).attr("value"));

Answer 4

您必须使用正确的jQuery函数来访问属性。

 $('.block').click(function(){
    console.log( $(this).attr('id') ); 
    console.log( $(this).attr('class') ); 
    console.log( $(this).attr('value') ); 
 });

Answer 5

检查一下

  $('.block').click(function(){ console.log(this.id); // is defined console.log(this.className); // undefined console.log($(this).attr('value')) // undefined }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <div class="container"> <div class="game-wrap"> <div class="row"> <div class="block" id="block1" value="1">test 1 </div> <div class="block" id="block2" value="2"> 2</div> <div class="block" id="block3" value="3"> 3</div> </div> </div> </div> 

Answer 6

因为value不是div元素的有效属性，所以className在Javascript中引用了class属性。 除了值以外，您还应该查看html5 data-*属性，该属性可让您嵌入所需的任意数据。

例如：

<div class="container">
  <div class="game-wrap">
    <div class="row">
      <div class="block" id="block1" data-value="1" data-best-dinosaur="T-Rex"> </div>
      <div class="block" id="block2" data-value="2" data-best-dinosaur="Stegosaurus"> </div>
      <div class="block" id="block3" data-value="3" data-best-dinosaur="Diplodocus"> </div>
    </div>
  </div>
</div>

<script>
  $('.block').click(function() {
    console.log(this.id);
    console.log(this.className);
    console.log(this.dataset.value)
    console.log(this.dataset.bestDinosaur);
  });
</script>