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;」を使用できます。ボタンで、私は思います。