CODEWITHSUNDEEP
javascriptjquery
Lazar Ljubenović
Lazar Ljubenović

Reputation: 19754

Callback not working properly

HTML

<div class="expand">
    <span>▲</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
});

I tried debugging it by putting alert('') in callback, but nothing popped up, so I guess I'm making some simple mistake here. Basically, ▼ should fade out and when it fades out (callback), it should turn into ▲, and then fade in, like that. Pretty standard we seen everywhere if you ask me. Or I'm doing this completely wrong?

I'd prefer corrections on my implementation than completely different solutions, although they're welcome as well.

Upvotes: 0

Views: 88

Answers (2)

PSL
PSL

Reputation: 123739

Inside the callback $(this) is already the span that you are looking for. So just use $(this).text(), as $(this).children() will fetch nothing as there are no child elements for the span and it will eventually point to the wrong target event if it has children.

Also place your fadeIn() inside the callback, if outside it will get executed before the callback executes.

   $(".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
});

Fiddle

You can just simplify this to:

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

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

Fiddle

Upvotes: 3

Matt Ball
Matt Ball

Reputation: 359776

Inside of the callback, this is already the element you want, so $(this).children() returns an empty object because that <span> does not have children. Remove the .children() from the callback: 

$(this).children().fadeOut("fast",function(){
    $(this).text("▲");
});

Upvotes: 3

Related Questions