javascript - 使用按钮使项目可见

Question

我有这个 javascript 代码：

function newsOverview() {
    $(".list-news li:gt(3)").hide();
    $(".box-news .btn-1").on('click', function(e){
        e.preventDefault;
        $(".list-news li:visible:last").nextAll(":lt(4)").fadeIn(600);
    });
};

我有一个包含 li 项目的大清单。该脚本每次显示 4 li 项目。当您单击 btn-1 按钮时。但现在我对这个脚本有疑问。

• 为什么 e.preventDefault 不起作用？当我单击按钮时。我滚动回到页面顶部。为什么这不起作用？
• 还有，有没有可能。当所有项目都可见时。那个按钮消失了。

Answer 1

1) preventDefault 不起作用，因为它是一个函数。它应该如下所示：

e.preventDefault();

2）要查看是否所有项目都可见，请尝试使用以下代码：

if ($(".list-news li:hidden").lehgth == 0) {
   $(".box-news .btn-1").hide();
}

Answer 2

为什么 e.preventDefault 不起作用？

为了实际调用 preventDefault，您缺少括号：

function newsOverview() {
    $(".list-news li:gt(3)").hide();
    $(".box-news .btn-1").on('click', function(e){
        e.preventDefault(); // don't forget those
        $(".list-news li:visible:last").nextAll(":lt(4)").fadeIn(600);
    });
};

还有，有没有可能。当所有项目都可见时。那个按钮消失了。

我的 jQuery 有点生疏，但这样的东西应该可以工作：

function newsOverview() {
    $(".list-news li:gt(3)").hide();
    $(".box-news .btn-1").on('click', function(e){
        e.preventDefault();
        if($(".list-news li:hidden").length === 0)
            $(this).hide();
        else
            $(".list-news li:visible:last").nextAll(":lt(4)").fadeIn(600);
    });
};

Answer 3

e.preventdefault(); 不工作

而且，你总是可以使用“return false;” 在按钮上，我想。