Question

我有一个包含许多图片的网格，每个图片都有一个CSS类设置为它的唯一ID。

使用这个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

Answer 1

问题在于this指的是调用初始化方法时的this而不是你的图像（即可能是你的文档准备好了）如果您需要为每个img添加个人网址，则可以单独创建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
    }
}, ....

使用qTip工具提示使用AJAX加载数据。 $（这）不是我所期望的

1 个答案: