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