Question

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
});

我尝试通过将alert('')置于回调中进行调试，但没有弹出任何内容，所以我想我在这里犯了一些简单的错误。基本上，▼应该淡出，当它淡出（回调）时，它应该变成▲，然后淡入，就像那样。如果你问我，我们到处看都很标准。或者我这样做完全错了？

我更喜欢对我的实施进行更正，而不是完全不同的解决方案，尽管他们也欢迎。

Answer 1

在回调内部，this已经是您想要的元素，因此$(this).children()会返回一个空对象，因为<span>没有子元素。从回调中删除.children()：

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

Answer 2

回调$(this)内部已经是您要找的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
});

<强> Fiddle

您可以将其简化为：

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

回调无法正常工作

2 个答案: