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

我当前正在使用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">

它按预期工作，但是我需要更多信息，并且我认为将其保存在对象中会更加干净。有人能指出我正确的方向吗？

最佳答案

在这种情况下，您可以将所有数据放入一个对象中，然后在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>