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)已经span是您正在寻找的。所以只需使用$(this).text(), as$(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 回答