在切换中更改文本范围的值

Question

$('.post-content').each(function () {
    var count = $(this).children().length;
    if (count > 1) {
        $(this).append("<span class='more'>More</span>");
        sel = $(this).children('p').slice(2);
        sel.hide();
    }
});


$(".more").click(function () {
    more = $(this);
    sel = $(this).parent().children('p').slice(2);
    console.log($(this))
    sel.slideToggle(function () {
        more.text("More");
    }, function () {
        more.text("Less");
    });
});

此代码工作正常,除非我尝试更改/更少.应该更多 - >更少 - >更多,我有更多 - >更少 - >更少

演示

http://jsfiddle.net/Y6TaU/

Answer 1

有两点需要注意:1.slideToggle()需要1个完整的回调2.这将对每个元素执行sel.您需要执行单个回调函数,您将在完成所有幻灯片操作时切换文本.

用于切换文本可以使用的.text(功能)的变异的.text() ,为以后就可以使用执行一个回调的承诺()由动画返回.

$(".more").click(function () {
    var more = $(this);
    sel = $(this).parent().children('p').slice(2);
    sel.stop(true, true).slideToggle().promise().done(function () {
        more.text(function (_, text) {
            return text == "More" ? 'Less' : "More"
        });
    });
});

演示:小提琴