ホームページ作成に関して

Question

ホームページを作成する際に使うjQueryについて、一点疑問がございますので、ご質問いたします。
よろしければ、ご回答いただければ、幸いでございます。

あるコードを読みながら、ホームページ作成の勉強をしているのですが、一部不明点がございました。
以下がコードの一部なのですが、以下の【function draw(){ 】の部分が果たしている役割が、webで調べても理解に足る回答を得ることができませんでしたので、ご回答をお願いしたいと思っております。

不適切な質問でしたら、誠に申し訳ございません。
おそらく、基本的な質問で、大変ご迷惑のこととは重々承知ではございますが、
よろしければご回答いただければ幸いでございます。

$(function() {
  var page = 0;
  function draw() {
    $('#page').html(page + 1);
    $('li.pg').hide();
    $('li.pg:first,li.pg:gt(' + page * 18 + '):lt(18)').show();
  }
  $('#prev').click(function() {
    if (page > 0) {
      page--;
      draw();
    }
  });
  $('#next').click(function() {
    if (page < ($('li.pg').size() - 1) / 18 - 1) {
      page++;
      draw();
    }
  });
  draw();
});

Comments

[kei344]

コードはコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「</>」ボタンを押すとコードブロックになります。

[Turtle]

ご指摘ありがとうございます。
修正いたしました。
以後ないよう気をつけてまいります。

Answer 1

拝見した感じ、<li class="pg"></li>の様な項目の並ぶリストがあり、
#prevと#nextをクリックする事で、18件ずつ表示する様なコードでしょうか。

draw();から都度function draw(){}を読み込んで、
表示している項目を切り替えている様です。

まず、以下の部分で今開いているページ数を#pageに保存しています。
pageが0から始まる様なので、ユーザーに分かりやすい様に+1をしています。

$('#page').html(page + 1);

次に、以下の部分で一旦すべての<li class="pg"></li>を非表示にしています。

$('li.pg').hide();

そして、以下の部分で表示すべき<li class="pg"></li>のみを表示している様です。

$('li.pg:first,li.pg:gt(' + page * 18 + '):lt(18)').show();

ただ、最後の部分について、今の情報だけでは内容が良く分かりませんでした。
表示される内容を箇条書きにすると、

• 一番初めの<li class="pg"></li>
• 今のページ数×18個目以降かつ、18個目以前の<li class="pg"></li>

を表示している様ですが、これでは今のページ数が0でなければ、
一番初めの<li class="pg"></li>しか表示されない様な……。

差し支えなければ、どの様な処理を目標とされているかという点と、
HTML側のコードもご提示頂くと、より具体的に回答できるかと思います。

Comments

[Turtle]

具体的でわかりやすいご回答ありがとうございました。
とても参考になり、プログラミングに関する知識が深まりました。
ありがとうございました。

Answer 2

jQueryに精通している・・というかかじったことも無いのですが、少し気になってしまい調べてみました。
ググったのは以下の２パターンです。
①「function draw()」、②「html function 意味」

回答としては
function draw() の function は関数をよぶためのクラス
function draw() の draw は画面全体を描画するための関数 だそうです。

最初の回答者さんが処理については詳しく答えてくださっているようなので、自分からの回答はこのぐらいで失礼します。