Question

JSON文字列を持つDATA属性があります。私はこのJSONを読んで、このオブジェクトからいくつかの情報を削除し、それをDATA attrに書き戻す必要があります。すべては問題ありませんが、JSONオブジェクトを作成しても機能しません。 DATA attrにJSONオブジェクトを書き込む方法は？

HTML

<div id="colors" data-colors='{"c1":"Red", "c2":"Yellow", "c3":"blue"}'></div> 

<button data-color="c1">Red</button> 
<button data-color="c2">Yellow</button> 
<button data-color="c3">Blue</button> 

jQueryの

$("button").click(function(){ 

    var obj = JSON.parse($('#colors').attr('data-colors')); 
    button_key = $(this).data('color'); 

    $.each(obj, function(key, value) { 
     if (key == button_key) { 
       delete obj[button_key]; 
     } 
    }); 

    $('#colors').attr('data-colors', obj); // this is not working, HOW ? 
}); 

Answer 1

あなたは戻って保存するときにオブジェクトをjsonifyのを忘れていました。

$('#colors').attr('data-colors', JSON.stringify(obj)); 

ヒント：データ属性にアクセスするための使用.data('attribute-name')。例えば。

var color = $('#abc').data('color') 
 

 
console.log(color)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="text" id="abc" data-color="red" >