web-dev-qa-db-ja.com

jQueryの切り替えと表示されている場合

アカウント管理ページの設定とオプションを含むdivがあります。

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

上記のコードは、表示されるかどうかに応じて、more/lessオプションリンクのテキストを変更する必要がありますが、jQueryは切り替えを非表示/表示にするものとして処理しないようです。

トグル機能を使用しながらこれを実装するにはどうすればよいですか？

jquerytoggle
13
j82374823749

コールバック関数を使用する必要があります。 ifステートメントが評価されるまでに、slideToggleは完了せず、誤った結果が得られます。

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

function callbackFn(){

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

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


}
40
redsquare

このコードはうまくいくと思います

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

1つの関数を2回使用する必要がない場合、コードの無駄になるため、別々の関数を使用することは好みません。誰かがそれに来ると、これは理解しやすいと思います。

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