0

我在将 qTip 插件与 AJAX 调用应用到 PHP 时遇到一些问题。我过去做过 getJSON 调用。我遇到了 JS 的问题，而不是 PHP 方面的问题。这是基础知识。我有数百个具有 rel 属性的链接（锚点）。每个 rel 属性都包含对 PHP 代码的 AJAX 调用的 URL，该 URL 将返回 HTML 或 JSON（无论工作如何）。

http://craigsworks.com/projects/qtip2/

CodeIgniter 代码的链接如下所示（https）：

<a rel="https://domain/cataloguers/ajax_detail/144969" class="title_dialog title_color" href="#">A Strange and Wonderful Prophet ... May 30th 1803. A.L. 5803... [A Manuscript...</a>

Javascript是我的问题所在。

$(document).ready(function()
{
    $('a.title_dialog[rel]').click().qtip({
        content: {
            text: 'Loading...',
            ajax: {
                url: $(this).attr('rel'),
                type: 'GET',
                data: {},
                dataType: 'json',
                success: function(data) {
                    // Set the content manually (required!)
                    console.log(data);
                    this.set('content.text', 'Successful!');
                }
            },
            title: {
                text: 'Catalogue Item Details:',
                button: false
            }
        }
    })
});

我可以获取 rel URL 并使用 console.log 将其转储，但我似乎无法获得任何类型的 AJAX 成功输出（数据）。我确定我可以通过 PHP 代码生成 HTML 或 JSON；它已经过测试。我是否需要某种 .each() 或回调函数方法来解决这个问题？

工作解决方案：

/*
 * ToolTip - qTip v2
 * For Title Details
 */
$(document).ready(function() {
    $('a.title_dialog[rel]').each(function() {
        var ajaxUrl=$(this).attr('rel');
        $(this).qtip({
            content: {
                text: $(this).attr('rel'),
                ajax: {
                    url: ajaxUrl,
                    type: 'GET',
                    data: {},
                    dataType: 'json',
                    success: function(result) {
                        this.set('content.text', result.content);
                    }
                },
                title: {
                    text: 'Catalogue Item Details:',
                    button: true
                }
            },
            position: {
                at: 'bottom center',
                my: 'top center',
                viewport: $(window),
                effect: false
            },
            show: {
                event: 'click',
                solo: true
            },
            hide: 'unfocus',
            style: {
                classes: 'qtip-light qtip-shadow'
            }
        })
    })

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

1 回答 1

3

循环元素以初始化插件，以便您可以将每个元素视为一个单独的实例。在插件内this可能无法访问，而在each循环内它是。因此，您使用所需的数据创建一个变量，并将该变量传递给插件

$('a.title_dialog[rel]').each(function(){
    var ajaxUrl=$(this).attr('rel');
    $(this).qtip({
         content: {
            text: 'Loading...',
            ajax: {
                url:ajaxUrl,
          ..........

    })
})

您想查看options/show将点击设置为打开提示的事件

于 2013-02-06T04:15:25.697 回答