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代码（我不知道为什么如果我把它放在文件准备就绪（）不起作用，如果我放置它只在选中复选框时工作：

 $(".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 lib，然后将代码放入文档准备

试试这个

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

DEMO

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

1 个答案: