jQuery 切换和 IF 可见性

Question

我有一个包含设置和选项的div，位于账户管理页面上。

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

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

我如何在仍使用 toggle 函数的情况下实现这个功能？

- j82374823749

---

我知道这很老，但另一个选项可能是在开始切换之前检查值。 - eselk

Answer 1

你需要使用回调函数。在if语句被评估时，slideToggle可能还没有完成，这会导致不正确的结果。

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

function callbackFn(){

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

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


}

- redsquare

Answer 2

我认为这段代码可以运行

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

- basim

Answer 3

我不喜欢使用单独的函数，因为当一个函数只需要使用一次时，这会浪费代码。我认为这样更容易理解，当有人接触它时。

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

- Ludovit Scholtz