Question

我正在使用HTML数据属性在使用$(this)点击元素时显示基本信息。例如，我有以下HTML代码段：

＆＃13;

$('.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>');
});

＆＃13;

<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">

＆＃13;

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

Answer 1

在这种情况下，您可以将所有数据放在一个对象中，然后使用data属性中该对象的属性名称在click事件处理程序中执行查找，如下所示：

＆＃13;

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();
});

＆＃13;

#info {
  display: none;
}

＆＃13;

<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>

＆＃13;

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

1 个答案: