いくつかの DIV を含むページがあります。DIV がクリックされるたびに qTip2 を表示したい。私がqTipで行っている他のいくつかのことのために、可能であれば同じものを何度も再利用したいと思います。
そのため、qTip2 デモを出発点として使用し、わかる限り、それを正確に複製しました。ただし、問題は次のとおりです。最初にクリックされた要素のqtipのみが表示されます-初めて。クリックしたい回数だけ他のすべての要素に表示されますが、最初の要素は最初の 1 回だけです。
誰かがこれに遭遇し、救済策を持っていますか?
問題を示す私が作成したサンプルアプリのコードは次のとおりです。
CSS:
#Container { border: 1px solid black; }
#Container > DIV { float: left; border: 2px outset silver; margin: 5px; }
#Container > DIV:nth-last-child(1) { float: none; border: none; height: 1px; overflow: hidden; margin: -1px 0 0 0;}
JavaScript:
var Container;
var ContainerEndItem;
$(document).ready(function () {
Container = $('#Container');
if(Container.length == 0){
alert("Container not found!");
return;
}
var addLinks = $('.TipTarget');
$('<div>Test</div>').qtip({
content : 'Test',
position: {
target: 'mouse', // Use the triggering element as the positioning target
adjust: { mouse: false, method: 'flip' },
my: 'left center',
at: 'right center',
effect: true // Enable default 'slide' positioning animation
},
show: {
target: addLinks,
event: 'click',
delay: 0
},
hide: {
event: 'none'
},
events: {
show: function (event, api) {
// Update the content of the tooltip on each show
var target = $(event.originalEvent.target);
if(target.length) {
api.set('content.text', 'Looking at: ' + target.text());
}
}
}
});
});
HTML:
<div id="Container">
<div id="Apples" class="TipTarget">Apples</div>
<div id="Watermelons" class="TipTarget">Watermelons</div>
<div id="Peaches" class="TipTarget">Peaches</div>
<div id="Meat" class="TipTarget">Meat</div>
<div id="Clear" style="clear: both"> </div>
</div>
JQuery: 1.8.3
ヒント2: 2.0.1
これは、この正確な設定の jsFiddle です: http://jsfiddle.net/Dracorat/Z3WqC/
アップル、スイカ、ピーチ、りんご、スイカ、ピーチの順にクリックし、繰り返し続けると、アップルは最初の 1 回だけヒントを表示することに注意してください。他の人は、牛が帰ってくるまで見せます。
更新してスイカで開始すると、初回のみ表示されますが、残りは毎回表示されることに注意してください。
私は何を間違えましたか？
（そして、私はすでに「each」コンストラクトを使用してみました-動作はまったく変わりませんでした）
ありがとう！