「Load More」(もっと見る)ボタンを追加する(jQuery)

2

次のjQueryを使用して、 "Load More」(もっと見る)ボタンを追加することができます。 たとえば、全体の項目が100個の初期に10の(あるいは20個)が表示されていて、「その他」をクリックすると、10ずつ表示されるようにしたい場合などに使用することができます。

$(function(){
$("div").slice(0, 10).show(); // 최초 10개 선택
$("#load").click(function(e){ // Load More를 위한 클릭 이벤트e
e.preventDefault();
$("div:hidden").slice(0, 10).show(); // 숨김 설정된 다음 10개를 선택하여 표시
if($("div:hidden").length == 0){ // 숨겨진 DIV가 있는지 체크
alert("더 이상 항목이 없습니다"); // 더 이상 로드할 항목이 없는 경우 경고
}
});
});
// Source: http://stackoverflow.com/

このコードを WordPress プラグインKBoard掲示板に適用してみました。 ここでテストヘボシルことができます。 基本的に5の項目が表示されていて、「もっと見る」をクリックすると、追加の5の項目が読み込まれます。 (KBoard 掲示板はすべて削除しました。)

WordPressでAjax Load Moreボタンを追加する方法は、次の記事を参照してください。

メモ:

2のコメント

    • こんにちは、クザク様。

      次の記事で紹介するプラグインで試しましたか?
      https://www.thewordcracker.com/intermediate/%EC%9B%8C%EB%93%9C%ED%94%84%EB%A0%88%EC%8A%A4%EC%97%90%EC%84%9C-load-more-button%EB%8D%94-%EB%B3%B4%EA%B8%B0-%EB%B2%84%ED%8A%BC%EC%9D%84-%EC%B6%94%EA%B0%80%ED%95%98%EB%8A%94-%EB%B0%A9%EB%B2%95/

      私は現在、 KBoardを使用していなくてテストすることができないため、正常になるかについては保証することができない点ご了承ください。

      基本的にAjaxを理解して応用すると、必要に応じ可能になります。

      https://codex.wordpress.org/AJAX_in_Plugins

コメントを残す

コメントを入力してください!
名前を入力してください