如何使用HTML数据属性返回对象数据？

Question

我正在使用HTML数据属性来显示使用$(this)单击元素时的基本信息。例如，我有以下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">

它的工作如预期，但我需要更多的信息，并将其保存在对象将是一个很大清洁，我认为。任何人都可以将我指向正确的方向吗？

Answer 1

在这种情况下，你可以把所有的数据在一个对象，然后使用该对象的属性名称在data属性在click事件处理程序进行查找，这样的事情：

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>