javascript - 切换工具提示文字

基本上我的问题是我的工具提示不会在切换时更改文本。我有一个具有展开/折叠功能的页面。通常，当您将鼠标悬停在向上箭头上时，标题标签会显示折叠面板。当您单击箭头按钮以折叠div面板时，img更改（现在箭头将指向下方，并且标题标签应更改为展开面板）。这可以正常工作，并且标题会更改，而无需使用工具提示。添加工具提示后，文本不会更改。我相信您必须在点击时销毁并创建一个新的工具提示，但是我不确定如何执行此操作。他是我的代码，谢谢。

$("img.toggle1").click(function(){
  if (document.getElementById("panel1").style.display != "none") { // is the div hidden?
    $("img.toggle1").attr("src", "images/expander-down.png");
    $("img.toggle1").attr("title", "Expand this section");
     }
  else{ // is the div showing?
    $("img.toggle1").attr("src", "images/expander-up.png");
    $("img.toggle1").attr("title", "Collapse this section");
    $('div#header1').addClass('headerBarFirstOff');
  }
    $("div.panel1").slideToggle("slow");

  });

因此，使用destroy / create方法进行更新。我可以在第一次单击时获得更改提示以进行扩展的工具提示，但该提示保持为“展开”状态。我用这个：

$("img.toggle1").click(function(){
  if (document.getElementById("panel2").style.display != "none") {
    $("img.toggle1").attr("src", "images/expander-down.png");
    $(document).tooltip("destroy"); //here's the change, the tooltip toggles once
    $(document).tooltip(); //here's the change, the tooltip toggles once
    $("img.toggle1").attr("title", "Expand this section");
     }
  else{
    $("img.toggle1").attr("src", "images/expander-up.png");
    //$(document).tooltip("destroy"); //doesn't work here
    //$(document).tooltip(); //doesn't work here
    $("img.toggle1").attr("title", "Collapse this section");
  }

另外，我有复选框（用于隐藏/显示特定面板）和用于打开或关闭所有控件的按钮：

$(document).ready(function(){
$("input.togglePanel1").click(function(){
  if($(".togglePanel1").length == $(".togglePanel1:checked").length) {
    $("div.panel1").slideDown("slow");
    } else {
    $("div.panel1").slideUp("slow");
    }
  });
$("input.togglePanel2").click(function(){
  if($(".togglePanel2").length == $(".togglePanel2:checked").length) {
    $("div.panel2").slideDown("slow");
    } else {
    $("div.panel2").slideUp("slow");
    }
  });
$("input.togglePanel3").click(function(){
  if($(".togglePanel3").length == $(".togglePanel3:checked").length) {
    $("div.panel3").slideDown("slow");
    } else {
    $("div.panel3").slideUp("slow");
    }
  });

$("img#closeAll").click(function(){
    $("div.panel1").slideUp("slow");
    $("div.panel2").slideUp("slow");
    $("div.panel3").slideUp("slow");
    $("div.panel4").slideUp("slow");
    $("div.panel5").slideUp("slow");
  });
$("img#openAll").click(function(){
    $("div.panel1").slideDown("slow");
    $("div.panel2").slideDown("slow");
    $("div.panel3").slideDown("slow");
    $("div.panel4").slideDown("slow");
    $("div.panel5").slideDown("slow");
  });

最佳答案

您可以使用uiTooltipTitle数据属性手动设置工具提示文本

$("img.toggle1").click(function(){
  var ishidden = $('#panel1').is(':hidden');
  var src = ishidden ? "images/expander-down.png" : "images/expander-up.png"
  var title = ishidden ? "Expand this section" : "Collapse this section";
  $("img.toggle1")
           .attr("src", src);
  $("img.toggle1")
           .attr("title", title)
           .data('uiTooltipTitle', title);
  $("div.panel1").slideToggle("slow");

  });

http://jsfiddle.net/SHBWW/

使用if / else

$("img.toggle1").click(function(){
    if($('#panel1').is(':hidden')){
        $("img.toggle1").attr("src", "images/expander-down.png");
        $("img.toggle1")
           .attr("title", "Expand this section")
           .data('uiTooltipTitle', "Expand this section");
    }else{
        $("img.toggle1").attr("src", "images/expander-up.png");
        $("img.toggle1")
           .attr("title", "Collapse this section")
           .data('uiTooltipTitle', "Collapse this section");
    }
    $("div.panel1").slideToggle("slow");
  });