Question

我正在尝试用qtip2做一个html工具提示。但是，按照网站上的简单示例，我只是调整了我的课程。但是，我不知道为什么这不起作用。如果我将.formreprovar' 更改为 .tooltiptext，则可以正常使用。感谢

JS

$(document).ready(function()
{
$('.reprovar').qtip({
            position: {
            my: 'bottom center',
             at: 'top center'
             },
             style: {
                classes: 'qtip-light'
             },
             content: {
             button: 'close',
             text: $(this).nextAll('.formreprovar').first()
            },
            hide: {
                fixed: true,
                event: false
            },
            show: {
                event: 'click'
            }
        });
   });

HTML

<input type="button" value="Reprovar" class="btn btn-danger reprovar">
<div class="formreprovar">
<input type="text" />
<b>oiiiiiiiiiiii</b>
</div>

CSS

body {
    padding: 50px;
}
.tooltiptext {
    display: none;
}
.formreprovar {
    display: none;
}

Answer 1

试试这个

$(this).nextAll('.formreprovar').first().text()

next获得紧随其后的兄弟选择器。如果找不到，那么它只是empty jQuery object

.next('.tootiptext')可以正常工作，而.formreprovar不是

也不要忘记选择器之后的.text()部分。

<强> Check Fiddle

<强>更新

问题似乎是this方法中的text上下文。

将其包裹在函数内部，以便上下文指向相关元素。

content: {
      button: 'close',
      text: function() {
          return $(this).nextAll('.formreprovar').first()
      }
},

<强> Working Fiddle

为什么qtip2插件不能与HTML一起使用？

1 个答案: