バルーン ツールチップを表示するために 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!" />