jquery - jQuery 切换和 IF 可见

Question

我有一个 div，其中包含帐户管理页面上的设置和选项。

$("#moreOptions").slideToggle('slow');
if ($("#moreOptions").is(":visible") == true) {
    $("#lnkMoreOpt").text("Less Options «")
}
else {
    $("#lnkMoreOpt").text("More Options »")
}

上面的代码应该根据它是否可见来更改更多/更少选项链接的文本，但是似乎 jQuery 不会将切换视为使其不可见/可见。

如何在仍然使用切换功能的同时实现这一点？

Answer 1

您需要使用回调函数。在评估 if 语句时，slideToggle 将不会完成，您将得到不正确的结果。

$("#moreOptions").slideToggle('slow', callbackFn);

function callbackFn(){

     var $link = $("#lnkMoreOpt");

     $(this).is(":visible") ? $link.text("Less Options «") : $link.text("More Options »");


}

Answer 2

我认为这段代码会起作用

$('#element').toggle('slow', function() {
    if($(this).is(':hidden')) { 
        $(this).text('This element is hidden.');
    }
    else {
        $(this).text('This element is visible.');
    }
}); 

Answer 3

我不喜欢使用单独的函数，因为当一个函数不需要使用两次时，这是浪费代码..我相信当有人谈到它时更容易理解..

$("#moreOptions").slideToggle('slow', function(){
     var $link = $("#lnkMoreOpt");
     $(this).is(":visible") ? $link.text("Less Options «") : $link.text("More Options »");
});