单击时更改工具提示文本（切换）

Question

我有一个像开关一样风格化的输入复选框，以及它附近的工具提示。我想如果用户单击复选框，它会在工具提示中显示一个文本，如果再次单击（未选中）它会显示另一个文本。我试过了，但是当被检查时，工具提示消失了。

主要结构：

<div class="switch">
    <input type="checkbox">
    <label><i class="glyphicon glyphicon-off"></i></label>
</div> 
<div class="tooltip fade bottom in" style="display: block;top: 52px;width: 115px;left: 16.5px;">
    <div class="tooltip-arrow"></div>
    <div id="tp1" class="tooltip-inner">Activar todas</div>
</div>

JQuery 代码（我不知道为什么如果我把它放在文档 ready() 中不起作用，如果我把它放在复选框被选中时它才起作用：

 $(".switch").click(function() {
        $(".tooltip").toggle();
        if ($("#tp1").text() == "Activar todas") {
            $("#tp1").text("Remove comment");
        }
        else {
            $("#tp1").text("Activar todas");
        }
    });

JSFiddle：http://jsfiddle.net/6hJ3J/

Answer 1

在 Fiddle 中加载 Jquery 库，然后将您的代码放入文档中

试试这个

 $(document).ready(function()
   $(".switch").click(function () {
    if ($("#tp1").text() == "Activar todas") {
     $("#tp1").text("Remove comment");
    } else {
     $("#tp1").text("Activar todas");
    }
   });
 });

DEMO