2

多くのツールチップを含むページがあります。ボタンをクリックするたびに個別に表示/非表示にしたい。私にはうまくいきません。誰か助けてもらえますか？

<span><input type="button" value="b1" onClick="showMyTT('div1');"></span><span><div id="div1"></div></span>
<span><input type="button" value="b2" onClick="showMyTT('div2');"></span><span><div id="div2"></div></span>
<span><input type="button" value="b3" onClick="showMyTT('div3');"></span><span><div id="div3"></div>​&lt;/span>

function showMyTT(id) { 
    $('#'+id).qtip({
        content: {
            text: 'Show the content', 
            title: false
        },
        position: {
            my: 'left center', 
            at: 'left center' 
        },
        show: {
            event: false, 
            ready: true 
        },
        hide: false, 
        style: {
            classes: 'ui-tooltip-shadow ui-tooltip-jtools'
        }
    }); 
}

ありがとうございました

4

1 に答える 1

2

このshowMyTT関数はツールチップを初期化します。すべての ID に対してこの関数を実行した後 (初期化)、次のようにする必要があります。

HTML

<input type="button" value="b1" onClick="toggleQtip('div1');" />

JavaScript

function toggleQtip(id) {
    var div = $('#'+id);
    if (div.data('visible')) {
        div.qtip('hide');
        div.data('visible', false);
    } else {       
        div.qtip('show');
        div.data('visible', true);
    }
}

編集

qtipを初期化する方法は次のとおりです（少なくとも1つの可能性）。たとえば、qtip が必要なすべての div にカスタム クラスを追加しますqtiped。

HTML

<div id="div1" class="qtiped">TEST</div>
<input type="button" value="b1" onClick="toggleQtip('div1');" />

次に、次のコードを実行します。

JavaScript

$(document).ready(function() {
    $('.qtiped').each(function() {
        showMyTT( $(this).attr('id') );
    });
});

また、内部showMyTTで次の変更を行います:show: falseオートローディングを回避するため (ツールチップを表示するのではなく、初期化する必要があります)。

于 2012-04-05T14:18:32.083 に答える