javascript - 如何在切换类中显示不同的工具提示文本

Question

我有一个“显示”按钮。当用户单击该按钮时，将出现一个隐藏的 div，并且该显示按钮将转换为“隐藏”按钮。将鼠标悬停在“显示”按钮图标上时，会出现一个工具提示:“显示全部”。现在，我需要，当“显示”按钮图标转换为“隐藏”按钮图标时，工具提示文本也将转换为“隐藏全部”。我怎样才能做到这一点？这是我的fiddle work

$('.show').click(function() {
    $(".text").toggle();
    $(this).toggleClass('hide');
})

Answer 1

var toggleState = false;

$('.show').click(function() {
    $('.text').toggle();
    $(this).toggleClass('hide').attr('title', toggleState ? 'Show All' : 'Hide All');
    toggleState = !toggleState;
});

每次点击都会将 toggleState bool 值交换为 true 和 false。所以第一次它是错误的，所以它将标题设置为“隐藏全部”。下次它是真的，所以它设置为“显示全部”。等等。

fiddle :http://jsfiddle.net/y8ZTj/1/