如何使用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>