Comment utiliser les attributs de données HTML pour renvoyer des données d'objet?

Question

J'utilise actuellement des attributs de données HTML pour afficher des informations de base lorsqu'un élément est cliqué à l'aide de $(this). Par exemple, je l'extrait de code HTML suivant:

$('.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">

Il travaille comme prévu mais j'ai besoin plus d'informations et de le garder dans des objets serait beaucoup plus propre que je pense. Quelqu'un pourrait-il me pointer dans la bonne direction?

Answer 1

Dans ce cas, vous pouvez mettre toutes les données dans un objet, puis utilisez les noms de propriétés de cet objet dans l'attribut data pour effectuer la recherche dans le gestionnaire d'événements click, quelque chose comme ceci:

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>