divタグにvalue属性を設定するにはどうすればよいですか？

Question

私は3つのボックスを持っています。それぞれのボックスをクリックすると、各ボックスの属性値を警告します。

https://jsfiddle.net/aedzgu9v/

<div class="box" value="box1"></div> 
<div class="box" value="box2"></div> 
<div class="box" value="box3"></div> 

.box{ 
    height: 80px; 
    width: 80px; 
    border: 2px solid blue; 
    margin: 5px; 
} 

$('.box').on('click', function(){ 
    var value = $(this).val(); 
    alert(value); 
}); 

Answer 1

は、代わりにこれを試してみてください：

<div class="box" name="box1"></div> 
<div class="box" name="box2"></div> 
<div class="box" name="box3"></div> 

$('.box').on('click', function(){ 
    var value = $(this).attr('name'); 
    alert(value); 
}); 

それとも、value属性を使用する場合：element`は `値attr.`の使用を`持つことはできません

$('.box').on('click', function(){ 
    var value = $(this).attr('value'); 
    alert(value); 
}); 

Answer 2

のみフォームコントロールを使用すると、val()を使用することができます正当な性質valueを持っている...他の要素は

ない私はあなたが使用してdata-属性とアクセス、それを使用するように切り替える提案しますdata()またはattr()

<div class="box" data-value="box1"></div> 

JS

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