3

別のDOM要素のIDであるbarデータを格納するクラスのDOM要素があります。foo

<div class="bar" data="foo">...</div>

そのような要素にカーソルを合わせると、データ（id）が指すDOM要素を取得したいと思います。これは私がしました：

$(".bar").hover(function(){alert($("#"+$(this).data()));});

しかし、ホバーすると、次のエラーが発生します。

Uncaught Error: Syntax error, unrecognized expression: #[object Object]

何が間違っているのですか、どうすれば修正できますか？

4

2 に答える 2

7

data()メソッドと要素のdata属性を混同しています。

このdata()メソッドは、探している文字列ではなく、要素にアタッチされたデータの無関係なオブジェクトを返します。

解決策1-属性としてのデータ

例で探している値を取得するには、次のattr()メソッドを使用して属性をクエリする必要があります。

$(".bar").hover(function(){alert($("#"+$(this).attr('data')));});

解決策2-オブジェクトとしてのデータ

このdata()方法を使用すると、要素に情報を手動で添付できます。

$('.bar').data('data','foo');
$(".bar").hover(function(){alert($("#"+$(this).data('data')));});

この場合'data'、要素のデータオブジェクト内のキーの単なる任意の名前であることに注意してください。data()メソッドの詳細については、jQueryのマニュアルを参照してください

解決策3-オブジェクトおよびHTML5属性としてのデータ

あなたの本来の意図は、data属性をHTML5データ属性としてクエリすることだったと思います。これは、jQueryのドキュメントによるとautomatically pulled in to jQuery's data object。

ただし、HTML5仕様によれば、HTML5データ属性にはdata-プレフィックスが必要であることに注意してください。したがって、例を機能させるために、属性に名前を付けることはできませんがdata、data-something。例えば：

<div class="bar" data-something="foo">...</div>

その後、jQueryのdata()メソッドでアクセスできます。

 $(".bar").hover(function(){alert($("#"+$(this).data('something')));});

jQueryはプレフィックスを自動的に削除するため、data-somethingでアクセスする方法に注意してください。data('someting')data-

于 2013-01-20T12:08:36.930 に答える
4

attr関数を使用して属性にアクセスする必要があります。

$(".bar").hover(function() {
     alert($("#"+$(this).attr('data')));
   });
于 2013-01-20T12:08:25.403 に答える