HTMLデータ属性を使用してオブジェクトデータを返す方法は？

Question

私は現在、$(this)を使用して要素がクリックされたときに、HTMLデータ属性を使用して基本情報を表示しています。例えば、私は次のHTMLスニペットがあります

$('.element').on('click', function(e) { 
 
    e.stopPropagation(); 
 
    $('#info').slideDown(); 
 

 
    var title = $(this).data('title'); 
 
    var desc = $(this).data('desc'); 
 
    var icon = $(this).data('icon'); 
 

 
    var info = $('#info'); 
 

 
    info.html('<div class="sub-info"><h1>' + title + '</h1><h1 class="icon">' + icon + '</h1></div><div class="side-info"><p>' + desc + '</p></div>'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="element" data-title="title" data-desc="desc" data-icon="H">

をそれが意図したとおりに働いているが、私はより多くの情報が必要とするオブジェクトにそれを維持することは、私が考える多くのクリーナーになります。誰かが私を正しい方向に向けることができますか？あなたはclickイベントハンドラ内で検索を実行するためにdata属性にそのオブジェクトのプロパティ名を使用し、その後、オブジェクト内のすべてのデータを置くことができる。この場合

Answer 1

、このような何か：

var data = { 
 
    foo: { 
 
    title: 'title #1', 
 
    description: 'description #1', 
 
    icon: 'icon #1' 
 
    }, 
 
    bar: { 
 
    title: 'title #2', 
 
    description: 'description #2', 
 
    icon: 'icon #2' 
 
    } 
 
}; 
 

 
$('.element').on('click', function(e) { 
 
    e.stopPropagation(); 
 
    var obj = data[$(this).data('key')]; 
 
    $('#info').html('<div class="sub-info"><h1>' + obj.title + '</h1><h1 class="icon">' + obj.icon + '</h1></div><div class="side-info"><p>' + obj.description + '</p></div>').slideDown(); 
 
});

#info { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="element" data-key="foo">Lorem</div> 
 
<div class="element" data-key="bar">ipsum</div> 
 

 
<div id="info"></div>