0

特定のdiv（#block_profile）でqtip2ツールチップを実行する以下の関数があります。問題は、複数回トリガーされることです。したがって、4番目の#block_profileをクリックすると、この関数が4回呼び出されます。クリックされた正確なdivに対してのみ実行させるにはどうすればよいですか？

// Create the tooltips only on document load
$(document).ready(function () {
    // Make sure to only match links to wikipedia with a rel tag
    $('div.block_profile[rel]').each(function () {


        // We make use of the .each() loop to gain access to each element via the "this" keyword...
        $(this).qtip(
            {
                content:{
                    // Set the text to an image HTML string with the correct src URL to the loading image you want to use
                    text:'<img src="/assets/ux/modal/loading.gif" alt="Loading..." />',
                    ajax:{
                        url:'/profiles/get_info/' + $(this).attr('rel') // Use the rel attribute of each element for the url to load
                    },
                    title:{
                        button:false
                    }
                },
                position:{
                    my:'top left',
                    target: 'mouse',
                    viewport:$(window), // Keep the tooltip on-screen at all times
                    adjust:{
                        x:10, y:10
                    }
                },
                hide:{
                    fixed:false // Helps to prevent the tooltip from hiding ocassionally when tracking!
                },
                style:{
                    classes:'container ui-tooltip ui-tooltip-tip'
                }
            })
    })

        // Make sure it doesn't follow the link when we click it
        .click(function (event) {
            event.preventDefault();
        });
});

html：

<div id ="block_profile" class ="block_profile rel="1">div 1</div>
<div id ="block_profile" class ="block_profile rel="2">div 2</div>
<div id ="block_profile" class ="block_profile rel="3">div 3</div>
<div id ="block_profile" class ="block_profile rel="4">div 4</div>
<div id ="block_profile" class ="block_profile rel="5">div 5</div>
4

1 に答える 1

1

次のコードを使用する必要があります。

// Create the tooltips only on document load
$(document).ready(function () {
    // Make sure to only match links to wikipedia with a rel tag
    $('div.block_profile[rel]')
        .qtip({
            ...
        })
        .click(function (event) {
            event.preventDefault();
        });
});

each電話は必要ありません。たとえば、このデモをチェックしてください。

于 2012-07-08T09:48:39.370 に答える