jquery - 单击时更改工具提示文本(切换)

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