0

ツールチップの生成に使用tooltipsterしていますが、アタッチされている要素のデータ属性に基づいてツールチップを設定したいと考えています。以下に示すように、画像のURLを設定できるように、関連データを取得するにはどうすればよいですか。これは私が試してきたことです：

$(".test").tooltipster({
  var datainfo = $(this).data("info");
  content: $('<div class="desc"><img src="img/'+datainfo+'.jpg"/></div>')
});

私のHTMLは基本的に次のとおりです。

<div class="test tooltip" data-info="AAA">Testing</div>
4

3 に答える 3

2

パラメータは関数ブロックではなくjsonであるため、datainfo行をそこから取り出す必要があります(jsonではなくjavascriptです)。多分これはあなたのために働くでしょう：

var datainfo = $(".test").data("info");
$(".test").tooltipster({
  content: $('<div class="desc"><img src="img/'+datainfo+'.jpg"/></div>')
});

この場合、画像を表示する多くのツールチップを設定したいと思います。それぞれに「テスト」クラスがあると仮定しましょう。

$(".test").each(function(){
  $(this).tooltipster({
      content: $('<div class="desc"><img src="img/' + $(this).data("info") + '.jpg"/></div>')
  });
});
于 2015-05-25T10:10:07.293 に答える
0

お使いのプラグインはこの方法では機能しない場合があります。プラグインのオプションのキー、値のペアではなく、数行のコードを渡しています。値が必要data-infoな場合、単純な解決策は、マウスオーバー イベントをバインドしてから、その属性値を取得することです。

例：

$(".test").on("mouseover",function(){
    var datainfo = $(this).attr("data-info");
});

注:プラグインが data-attribute を削除する場合、画像の src を取得するために別の属性を使用する必要がある場合があります。

于 2015-05-25T10:13:06.643 に答える