jQuery attrを用いてカスタムdata属性を制御

• データ1
• データ2

データ入れ替え

データ入れ替えボタンクリックでdata属性が入れ替えられます。

$(function(){
var $doc = 	$(document);
var PREFIX = {
TEST : 'test',
USER : 'user'
};
var $startElement = $('#startElement');
var $targetElement = $('#targetElement');

function getHtmlData($el, prefix) {
	var data = $el.attr('data-' + prefix),
		json = $.parseJSON(data),
		results = {};

	if (typeof json === "object") {
		$.each(json, function(k, v){
			results[k] = v;
		});
	} else if (data === 'string') {
		return data;
	}	
	return results;
}

function setHtmlData($el, data, prefix) {
	var type = typeof data;
	
	if (type === 'object') {
		$el.removeData('data-' + prefix); //cacheDataを削除
		$el.attr('data-' + prefix, JSON.stringify(data));
		
	} else if (type === 'string') {
		$el.removeData('data-' + prefix); //cacheDataを削除
		$el.attr('data-' + prefix, data);
	}	
	return $el;
}

function changeHtmlData($el, $el2, prefix) {
	var dataA = getHtmlData($el, prefix);
	var dataB = getHtmlData($el2, prefix);
	setHtmlData($el, dataB, prefix);
	setHtmlData($el2, dataA, prefix);
}

$doc.on('click','#changeData', function(e){
	changeHtmlData($startElement, $targetElement, PREFIX.USER);
});

});