0

HTML

<div class="expand">
    <span>▲&lt;/span>
</div>

JS

$(".expand").click(function(){
    if ($(this).children().text()=="▼") {
        $(this).children().fadeOut("fast",function(){
            $(this).children().text("▲");
        }); // callback?
        $(this).children().fadeIn("fast"); //woks
    } else {
        $(this).children().fadeOut("fast",function(){
            $(this).children().text("▼");
        }); // callback?
        $(this).children().fadeIn("fast"); //works
    };
    $(this).parent().parent().find(".words, .readings").slideToggle("fast"); //works
});

コールバックを入れてデバッグしようとしましalert('')たが、何もポップアップしなかったので、ここで単純な間違いを犯していると思います。基本的には▼がフェードアウトし、フェードアウト(コールバック)したら▲になってからフェードインする、という感じです。あなたが私に尋ねると、どこでも見られるかなり標準的です。それとも私はこれを完全に間違っていますか？

まったく異なるソリューションよりも、実装の修正を好みますが、それらも大歓迎です。

4

2 に答える 2

3

コールバックの内部には、thisすでに必要な要素があるため、子がない$(this).children()ため空のオブジェクトを返します。をコールバックから<span>削除します。.children()

$(this).children().fadeOut("fast",function(){
    $(this).text("▲");
});
于 2013-07-03T16:39:43.107 に答える
3

コールバック内には、探しているもの$(this)がすでにあります。そのため、 asをspan使用するだけで、スパンの子要素がないため何もフェッチされず、子がある場合は最終的に間違ったターゲット イベントを指すことになります。$(this).text()$(this).children()

またfadeIn()、コールバックが実行される前にコールバックが実行される場合は、コールバック内に配置します。

   $(".expand").click(function () {
    if ($(this).children().text() == "▼") {
        $(this).children().fadeOut("fast", function () {
            $(this).text("▲").fadeIn("fast");
        }); // callback?

    } else {
        $(this).children().fadeOut("fast", function () {
            $(this).text("▼").fadeIn("fast");
        }); // callback?

    };
    $(this).parent().parent().find(".words, .readings").slideToggle("fast"); //works
});

フィドル

これを次のように単純化できます。

$(".expand").click(function () {
    $(this).children().fadeOut(function () {
        $(this).text(function (_, val) {
            return val == "▼" ? "▲" : "▼";
        }).fadeIn("fast");
    })

    $(this).parent().parent().find(".words, .readings").slideToggle("fast"); //works
});

フィドル

于 2013-07-03T16:39:50.123 に答える