使用選擇的數據屬性更改顏色

Question

我必須更改哪些數據顏色屬性 而不是數值？

感謝所有幫助:)

<select class="color" onchange="getval(this);"> 
    <option data-color="#111111" value="#111111">color 1</option> 
    <option data-color="#222222" value="#222222">color 1</option> 
    <option data-color="#333333" value="#333333">color 1</option> 
    <option data-color="#444444" value="#444444">color 1</option> 
</select> 

<script>   
    $('.color').on('change', function(){ 
     $("#newcolor").css("background", (this.value)); 
    }); 
</script> 

Answer 1

使用.data方法

$("#newcolor").css("background", ($(this).data("color"))); 

Answer 2

保持簡單：添加到您當前getval功能：

function getval(curr) { 
    var color = $(curr).find(':selected').data('color'); 
    $("#newcolor").css("background-color", color); 
} 

Answer 3

這裏是這樣做的一種方式。雖然我不得不挖掘一點來找到數據/顏色值。

$('.color').on('change', function() { 
 
    var value = $(this).val(); 
 
    var color = $(this).find('[value="' + value + '"]').data("color"); 
 
    $("#newcolor").css("background", color); 
 
})

div { 
 
    width: 100; 
 
    height: 100px; 
 
    background-color: blue; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="newcolor"></div> 
 
<select class="color"> 
 
    <option data-color="#111111" value="#111111">color 1</option> 
 
    <option data-color="#222222" value="#222222">color 1</option> 
 
    <option data-color="#333333" value="#333333">color 1</option> 
 
    <option data-color="#444444" value="#444444">color 1</option> 
 
</select>