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

我不想使用单独的函数，因为当一个函数不需要使用两次时，就会浪费代码..我相信当有人来时，这更容易理解..

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

Answer 3

我认为此代码可以正常使用

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

jQuery切换和IF可见

3 个答案: