無法使用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>

希望這會幫助你。