2

我有一个看起来像这样的 div：

<div class="enemy" data-level="1" data-dmg="10" data-hp="50" data-type="A" data-ready_to_breed="false"><span>Enemy 1</span></div>

如何<span>以用户始终可以查看 div（或“敌人”）状态的方式显示数据标签中的内容

4

2 回答 2

5

要访问该data属性，请使用.data().

$('.enemy').data('type'):
$('.enemy').data('ready_to_bread'):

等等。

要显示到span关于enemy尝试：

var enemy = $('.enemy');
$('span', enemy).html(enemy.data('type'))

显示所有数据属性：

var enemy = $('.enemy'),
var data = enemy.data();

$.each(data, function(key, val) {
    enemy.append($('<span/>', {
        'class' : key, // if you need then can add class like this
        html: key + " : " + val + '<br>'
    }));
});

演示

于 2012-08-15T12:18:41.577 回答
1

您可以像这样在 div 中添加新元素：

$('.enemy').each(function(){
   var $this = $(this);
    $this.children().append($('<span />').html('Level: ' + $this.data('level')));
    $this.children().append($('<span />').html('Dmg: ' + $this.data('dmg')));
});

现场示例：http: //jsfiddle.net/ZJDEu/

这将导致标记，例如：

<div class="enemy" data-ready_to_breed="false" data-type="A" data-hp="50" data-dmg="10" data-level="1">
   <span>
   Enemy 1
     <span>Level: 1</span>
     <span>Dmg: 10</span>
   </span>
</div>

当然，您可以更改 jquery 以形成您想要的任何标记。

如果是我，我会选择稍微不同的东西：

$('.enemy').each(function(){
   var $this = $(this);
    $this.append($('<span />').addClass('level').html($this.data('level')));
    $this.append($('<span />').addClass('dmg').html($this.data('dmg')));
});

形成标记：

<div class="enemy" data-ready_to_breed="false" data-type="A" data-hp="50" data-dmg="10" data-level="1">
  <span>Enemy 1</span>
  <span class="level">1</span>
  <span class="dmg">10</span>
</div>

因为这对于样式/布局目的来说更容易处理。

现场示例：http: //jsfiddle.net/djdAB/

于 2012-08-15T12:21:30.950 回答