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. 本部は値を持っていません。
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>

これはあなたを助けることを願って行きます。