加载所有内容后需要将“加载更多”按钮名称和功能更改为“显示更少”

Question

脚本运行良好！但是我需要在加载所有内容后将按钮名称和功能从“加载更多”更改为“显示更少”。

stackoverflow 的答案在这里： Load more button should disappear 但这个答案中没有淡入淡出动画。

使用代码：https://codepen.io/vishnuprasad/pen/oBzqpd

$(function () {
    $("div").slice(0, 4).show();
    $("#loadMore").on('click', function (e) {
        e.preventDefault();
        $("div:hidden").slice(0, 4).slideDown();
        if ($("div:hidden").length == 0) {
            $("#load").fadeOut('slow');
        }

    });
});

Answer 1

在带有id的标签标签中写入Load More。

<label id="lblLoad">Load More</label>

添加你的函数

$('#lblLoad').html("Show Less");

改变你的身份证

$("#loadMore").attr("id", "loadLess");

现在为点击 id #load less 编写一个新函数。

这里是Fiddle。我在这里触发了警报，但你可以做任何你想做的事。希望对您有所帮助。