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'):

等々。

spanaboutに表示するには、次を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 に答える