1

我正在尝试通过 ajax 显示 qtip 弹出窗口，但没有成功。我得到了以下代码，但似乎无法检测到哪里出了问题。帮助将不胜感激。

<script type="text/javascript">
$(document).ready(function()
{
    $('.tiplink').qtip({
        content:{
            var id = $(this).attr('rel');
            text: '<img class="" src="../images/loader.gif" alt="Loading..." />',
            ajax:{
                url: 'pops.php',
                type: 'POST', 
                loading: false,
                data: 'id=' + id
            }
        },

        show: 'mouseover', // Show it on mouseover
        hide: {
            delay: 200,
            fixed: true // We'll let the user interact with it
        },
        style: {
            classes: 'ui-tooltip-light ui-tooltip-shadow',
            width: 290 
        }
    });

});
</script>

<a href="#" class="tiplink" rel='1'>show me the popup1!</a>
<a href="#" class="tiplink" rel='2'>show me the popup2!</a>
<a href="#" class="tiplink" rel='3'>show me the popup3!</a>
4

2 回答 2

1

我有类似的问题；这似乎与$('.myclass').qtip({})不能引用多个元素的事实有关。如果确实如此（例如您的示例），您需要将 qtip() 调用包装在each(function())块中...

关于您的示例，以下内容应该可以解决您的问题：

$(document).ready(function()
{
  // the each() call I was explaining above this code example
  $('.tiplink').each(function(){

    // Extract your variables here:
    var $this = $(this);
    var id = $this.attr('rel');

    // Now make your qtip() call
    $this.qtip({
      content:{
        text: '<img class="" src="../images/loader.gif" alt="Loading..." />',
        ajax:{
          url: 'pops.php',
          type: 'POST', 
          loading: false,
          data: 'id=' + id
        }
      },
      show: 'mouseover', // Show it on mouseover
      hide: {
        delay: 200,
        fixed: true // We'll let the user interact with it
      },
      style: {
        classes: 'ui-tooltip-light ui-tooltip-shadow',
        width: 290 
      }
    });
  }); // end each(function()) call
});
于 2012-12-14T15:47:27.127 回答
0

有一些问题可能对您有所 帮助

以及 qtip 网站上的教程 本身

如果您按照书面规定做所有事情，我看不出任何其他原因它不应该工作

于 2012-08-15T09:21:32.233 回答