0

バルーン ツールチップを表示するために coda スタイルの jquery プラグインを使用しています。ここにリンクがあります: http://www.uhleeka.com/blog/2009/11/bubbletip/

要素のクリック時にバルーンのツールチップを表示するために、この jquery を作成しました。

これは私がIDでこれを行っていることですが、クラス名を使用してこれを行うにはどうすればよいですか。各 ID のバブルチップ関数を記述する代わりに、バブルチップを適用する単一の (共通の) jquery 関数を記述する方法を教えてください。

<script type="text/javascript">
    $(document).ready(function() {
            $('#fee').bubbletip($('#tip1_focusblur'), {
                deltaDirection: 'right',
                bindShow: 'click',
                bindHide: 'blur'
            });



            $('#price').bubbletip($('#tip2_focusblur'), {
                deltaDirection: 'right',
                bindShow: 'click',
                bindHide: 'blur'
            });

    });
</script>

<p>Input box 1<input type="text" id="fee" value="focus me!" /></p>

<div id="tip1_focusblur" style="display:none; max-width:330px;">
    <pre class="tip">
        This is the div where help can be display.
    </pre>  
</div>

<p>Input box 2<input type="text" id="price" value="focus me!" /></p>

<div id="tip2_focusblur" style="display:none; max-width:330px;">
    <pre class="tip">
        This is the div where help can be display.
    </pre>  
</div>

編集： 私は解決策を見つけました：JofryHSの提案に従って、私はこの解決策を試しました。

これは良い解決策ですか??

Javascript:

$(document).ready(function() {
    var count = 0;
        $('[data-bubble]').each(function() {    
            count++;
            var data = $(this).attr('data-bubble');
            $(this).parent().append($('<div class="bubble" id="bubble_'+ count+ '">' + data + '</div>'));
            $(this).bubbletip('#bubble_'+count, {
                deltaDirection: 'right',
                bindShow: 'click',
                bindHide: 'blur'
            });
        });
});

HTML:

<input type="text"  data-bubble="This is Test text 1"  value="focus me!" />

<input type="text"  data-bubble="This is Test text 2"  value="focus me!" />
4

2 に答える 2

0

1 つの方法は、グローバル関数を作成し、必要なときに呼び出すことです。

 function bubbleTip(obj1,obj2){
    $('#'+obj1).bubbletip($('#'+obj2), {
            deltaDirection: 'right',
            bindShow: 'click',
            bindHide: 'blur'
        });
}

ツールチップを表示する場所に引数を指定して関数を呼び出します。

$(function(){ //shorthand for document.ready
   bubbleTip('fee','tip1_focusblur');
   bubbleTip('price','tip2_focusblur');
});
于 2013-09-24T04:51:35.577 に答える