【问题标题】:How to show different tooltip text at toggle class如何在切换类中显示不同的工具提示文本
【发布时间】:2014-07-10 15:48:44
【问题描述】:
我有一个“显示”按钮。当用户单击该按钮时,将出现一个隐藏的 div,并且该显示按钮将转换为“隐藏”按钮。将鼠标悬停在“显示”按钮图标上时,会出现一个工具提示:“显示全部”。现在,我需要,当“显示”按钮图标转换为“隐藏”按钮图标时,工具提示文本也将转换为“全部隐藏”。我怎样才能做到这一点?这是我的fiddle work
$('.show').click(function() {
$(".text").toggle();
$(this).toggleClass('hide');
})
【问题讨论】:
标签:
javascript
jquery
tooltip
【解决方案1】:
var toggleState = false;
$('.show').click(function() {
$('.text').toggle();
$(this).toggleClass('hide').attr('title', toggleState ? 'Show All' : 'Hide All');
toggleState = !toggleState;
});
这会将toggleState 布尔值交换为每次点击的真假。所以第一次它是假的,所以它将标题设置为“全部隐藏”。下次它是真的,所以它设置为“显示全部”。以此类推。
小提琴:http://jsfiddle.net/y8ZTj/1/