0

多くの画像のグリッドがあり、各画像には一意の ID に設定された CSS クラスがあります。

この JavaScript コードを使用して、サーバーのバックエンドに、上記の要素の適切な HTML サマリーを作成して返すように依頼したいと思います。

$('.tier-items a img').qtip({
    content: {
        text: 'Loading...', // The text to use whilst the AJAX request is loading
        ajax: {
            url: '/Items/GetToolTip/' + $(this).attr("class"), //I assumed that $(this) would contain the element I moused over.
            type: 'GET', // POST or GET
            data: {} // Data to pass along with your request
        }
    },
    style: {
        classes: 'ui-tooltip-youtube ui-tooltip-shadow'
    },
    position: {
        my: 'bottom center',
        at: 'top center',
        effect: function (api, pos, viewport) {
            // "this" refers to the tooltip
            $(this).animate(pos, {
                duration: 600,
                easing: 'linear',
                queue: false // Set this to false so it doesn't interfere with the show/hide animations
            });
        }
    }
});

ただし、この場合$(this)、qTip を呼び出すためにマウスオーバーされた要素が含まれていないようです。

次のような URL を呼び出す必要があります。

/Items/GetToolTip/23

代わりに私は得る：

/Items/GetToolTip/undefined?_=1334977600119

QTip が呼び出された要素を取得する方法はありますか?

これを試してみましたが、まだサイコロはありません:

itemHoverId = 1;

//Construct the id, on mouseenter and use that instead of $(this)
$('.tier-items a img').mouseenter(function () {
    itemHoverId = $(this).attr("class");
    alert(itemHoverId);
});

$('.tier-items a img').qtip({
    content: {
        text: 'Loading...', // The text to use whilst the AJAX request is loading
        ajax: {
            url: '/Items/GetToolTip/' + itemHoverId, //I assumed that $(this) would contain the element I moused over.
            type: 'GET', // POST or GET
            data: {} // Data to pass along with your request
        }
    },

結果の呼び出しは次のとおりです。

/Items/GetToolTip/1?_=1334978818620
4

1 に答える 1

2

問題は、初期化メソッドが呼び出されたときに画像ではなくthis何を参照しているのかですthis(つまり、おそらくドキュメントの準備ができています)。各画像に個別の URL が必要な場合は、qtip ウィジェットを個別に作成できます。

$('.tier-items a img').each(function() { $(this).qtip({
content: {
    text: 'Loading...', // The text to use whilst the AJAX request is loading
    ajax: {
        url: '/Items/GetToolTip/' + $(this).attr("class"), //I assumed that $(this) would contain the element I moused over.
        type: 'GET', // POST or GET
        data: {} // Data to pass along with your request
    }
}, ....
于 2012-04-21T03:26:30.660 に答える