使用独特的选择器关闭所有打开的醉酒工具提示答案

【问题标题】：Close all open tipsy tooltip with unique selector使用独特的选择器关闭所有打开的醉酒工具提示
【发布时间】：2014-08-30 05:02:00
【问题描述】：

在我的项目中，我使用 jquery Tipsy tooltp 来验证表单的字段。我想一次性隐藏所有打开的工具提示，而不必指定每个元素的 id，但不幸的是我不能。我试过这种方式，但按钮 hide2 和 hide3 无法正常工作。

<p><input type="text" name="name" id="name" rel="ttp" /></p>
<p><input type="text" name="sname" id="sname" rel="ttp" /></p>
<p><input type="text" name="email" id="email" rel="ttp" /></p>

<input type="button" value="show" id="show_ttp">
<input type="button" value="hide" id="hide_ttp">
<input type="button" value="hide2" id="hide2_ttp">
<input type="button" value="hide3" id="hide3_ttp">

$('[rel=ttp]').tipsy({trigger: 'manual', gravity: 'w'});

$("#show_ttp").click(function(){
   $('#name').attr('title', 'name').tipsy('show');
   $('#sname').attr('title', 'surname').tipsy('show');
   $('#email').attr('title', 'email').tipsy('show');
});

$("#hide_ttp").click(function(){
   $('#name').tipsy('hide');
   $('#sname').tipsy('hide');
   $('#email').tipsy('hide');
});

$("#hide2_ttp").click(function(){
   $('*').tipsy('hide');
});

$("#hide3_ttp").click(function(){
  $('[rel=ttp]').tipsy('hide');
});

http://jsfiddle.net/tm9V2/

我该怎么办？谢谢

【问题讨论】：

标签： javascript jquery html css animation

【解决方案1】：

要隐藏所有提示信息，只需使用 .tipsy 类作为选择器并使用 jquery hide() 隐藏它

代码：

$("#hide2_ttp").click(function(){
    $('.tipsy').hide();
});

Fiddle Demo

【讨论】：

非常干净。这正是我一直在寻找的。谢谢。
@PaoloRossi 很高兴为您提供帮助
我觉得$('.tipsy').remove(); 更干净，因为如果您多次显示和隐藏它们，它不会污染您的DOM

【解决方案2】：

我不知道如何使用这个工具提示插件，但你可以使用强制隐藏这些对象。

由于 Tipsy 插件通过其 hide 方法删除其对象，因此您也可以使用 jQuery .remove() 函数并且不要忘记使用 javascript 附加对象，因此请使用 $(document).on 来操作它们。检查这个：

jsFiddle Demo

$(document).on('click','#hide2_ttp',function(){
    $('.tipsy').eq(1).remove();
});

$(document).on('click','#hide3_ttp',function(){
    $('.tipsy').eq(0).remove();
});

编辑：要隐藏所有打开的工具提示，请使用此功能：

jsFiddle Demo

$(document).on('click','#hideallopen',function(){
    $('.tipsy').remove();
});

【讨论】：

谢谢，但我必须用唯一的选择器一次性隐藏所有工具提示
@PaoloRossi 再次检查我的答案，因为 Tipsy 插件使用其 hide 方法删除了它的对象，您也可以使用 jQuery .remove() 函数并且不要忘记使用 javascript 附加对象，所以使用$(document).on 来操纵它们。

【解决方案3】：

只需将所有元素包装在 div/form/span 中并更改以下代码：

$("#hide2_ttp").click(function(){
    $('*').tipsy('hide');
});

到

$("#hide2_ttp").click(function(){

 $('#elements input').each(function(){
        $(this).tipsy('hide');
    });
});

其中 'elements' 是输入包装器的 id。

通过这种方式，您可以拥有多组输入并分别关闭它们。

小提琴：http://jsfiddle.net/tm9V2/8/

【讨论】：

【解决方案4】：

这就是你要找的东西

  $("#hide3_ttp").click(function(){
        $('[rel=ttp]').each(function(index, element){$(element).tipsy('hide');});
    });

【讨论】：

感谢您的建议，但@Kamesh 的代码似乎更干净