質問内容
質問を評価する
(0ポイント)
|
リンクをマウスオーバーしたとき、リンクのhrefの値を取得して吹き出ししたいHTMLのidを割り出します。そしてhtml()メ
ソッドでasideタグ以下の要素を取得し、それをtooltip用プラグインであるballoonのcontents属性にセットして動的に表示
するHTMLを変えたいと思っています。（アイデア１）では一時変数contentにmouseoverイベント時に取得したhtmlを格
納し、それをbaloonで表示したいと思いました。しかしこのメソッドチェーンでは動いてくれません。（アイデア２）では
balloon実行時に無名関数を利用しquotelinkクラスからhrefを取得したいと思ったのですが、$(this)ではquotlinkクラスオ
ブジェクトが取得できません。
みなさんのお知恵をお貸しください。よろしくお願いします。
■画面に吹き出し表示したい箇所のHTML
<aside id="q56" style="padding-top: 40px; margin-top: -40px;">
<div id="reply" >
<div>
<span class="filecaption">1390245737775.jpg (75KB, 661x720)</span>
<a id="reply_image" href="/uploads/fullsize/1390245737775.jpg" target="_blank">
<img src="/uploads/thumbs/1390245737775.jpg" alt=""></a>
<blockquote class="postMessage">
たたたたああああああああああああああ<br>
</blockquote>
</div>
</div>
</aside>
■マウスオーバーする箇所
<a href="/threads/international/22#q56" id="c56" class="quotelink">56</a>
■javascript:
（アイデア１）
var content;
$('.quotelink')
.on("mouseover", function () {
var link = $(this).attr("href");
var num = String(link).split("#");alert('num = ' + num);
content = $("aside#" + num[1]).html();
content = content.replace(/\r\n/g, "");//IE
content = content.replace(/\n/g, "");//Firefox
}).balloon({
showDuration: 0,
hideDuration: 0,
minLifetime: 0,
tipSize: 0,
offsetY: 50,
contents: content,
css: {
opacity: "1.0"
}
})
});
（アイデア２）
var content;
$('.quotelink').balloon({
showDuration: 0,
hideDuration: 0,
minLifetime: 0,
tipSize: 0,
offsetY: 50,
contents: function() {
var link = $(this).attr("href");
var num = String(link).split("#");alert('num = ' + num);
content = $("aside#" + num[1]).html();
content = content.replace(/\r\n/g, "");//IE
content = content.replace(/\n/g, "");//Firefox
alert('content = ' + content);
return content;
},
css: {
opacity: "1.0"
}
})
});
|
