javascript - ボタンでhtmlファイルのリストを循環

Question

私は言う製品のリストを持っています：

laptops/prod1.html
laptops/prod2.html
laptops/prod3.html
monitors/prod1.html
monitors/prod2.html
monitors/prod3.html

利用可能なアイテムを「循環」するボタンがページに欲しいです。

これを行う方法がわかりません。これはjavascriptで可能ですか？

Answer 1

function nextProduct(incr) {
  var href = window.location.href
    , offset = (typeof(incr)==='undefined' ? 1 : incr);
  window.location = href.replace(/(\d+)\.html/, function(m, g1) {
    return (Number(g1) + offset) + '.html'
  });
}

次に、次のようなことができます。

var button;
button = document.getElementByID('next-button');
button.addEventListener('click', function() { nextProduct(1); });
button = document.getElementByID('prev-button');
button.addEventListener('click', function() { nextProduct(-1); });

Answer 2

メイン ページをセットアップします。これは静的な html ページではなく、選択したサーバー側の言語である必要があります。

script タグを使用してメイン ページに jquery を含めます (jquery はhttp://jquery.com/から取得できます)。

html は次のようになります。

<div id='content'></div>
<div>
   <a href='javascript:void(0)' id='prev' class='btn'>Previous</a>
   <a href='javascript:void(0)' id='next' class='btn'>Next</a>
</div>

あなたのjsファイルには、次のようなものがあります：

var currPage = 0;
var pageList = ["laptops/prod1.html","laptops/prod2.html", "laptops/prod3.html"];
var totalPages = pageList.length;
$(".btn").on("click",function(){
   //if we are at the last page set currpage = 0 else increment currPage.
   currPage = currPage < (totalPages - 1) ? ++currPage : 0;
   var page = pageList[currPage];
   $('#content').load(currPage);
});

考慮すべき点:

1. 最初のページがメイン ページの読み込み時に読み込まれるか、クリック時に読み込まれるかを決定する必要があります。
2. 現在読み込まれているページを追跡するには、js 変数を設定する必要があります。
3. 可能なすべてのページを格納する方法を追加する必要があります (配列と考えてください)。これは、ページの読み込み時にページのスクリプト タグに出力できます。
4. ラインの終わりに到達したときに何が起こるかを決定する必要があります。循環するか、適切なリンクをグレーアウトすることができます。

jquery ロード時の jquery