繰り返し文を使って本を並べたい

Question

前提・実現したいこと

本棚に同じ本を１０冊ずつ並べたいのですが、htmlを使って全て書くと大量に書くことになるので、JavaScriptかjQueryの繰り返し文を使って書こうと思ったのですが、うまく行きません。

ここにより詳細な情報を記載してください。

コード

  <div class="main">
    <div class="haikei">
      <div class="background-shelf">
        <div class="shelf-all shelf1">
          <img src="../images/shelf.png">
          <div class="shelf1-book book1">
            <div class="book-before">
              <div class="rect">
                <div class="book-all book-top"></div>
                <div class="book-all book-right"></div>
                <div class="book-all book-covor"></div>
              </div>
            </div>
            <div class="book-after">
                <img src="../images/books/20dainisiteokitai17nokoto.jpg" class="alltag tag-A" width="150px">
                <button class="buttonA">閉じる</button>
            </div>
          </div>
        </div>
        <div class="shelf-all shelf2">
          <img src="../images/shelf.png"></div>

        <div class="shelf-all shelf3">
          <img src="../images/shelf.png"></div>

        <div class="shelf-all shelf4">
          <img src="../images/shelf.png"></div>

        <div class="shelf-all shelf5">
          <img src="../images/shelf.png"></div>
      </div>
    </div>
  </div>

.main {
  position: relative;
  height: 2800px;
  top: 0;
}
.haikei{
  width: 1000px;
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
}
.background-shelf img{
  width: 1000px;
  position: absolute;
}
.background-shelf{
  left: 0;
  right: 0;
  margin: auto;
}
.shelf-all{
position: absolute;
}
.shelf1{
  top: 300px;
}
.shelf2{
  top: 800px;
}
.shelf3{
  top: 1300px;
}
.shelf4{
  top: 1800px;
}
.shelf5{
  top: 2300px;
}
.shelf1-book{
  top: -80px;
}
.book1{
  position: relative;
  left: 100px;
}
.rect{
position: relative;
transform-style: preserve-3d;
perspective-origin: 0% 100%;
  transform:rotateY(-15deg) rotateX(-10deg);
}
.book-all{
  position: absolute;
}
.book-top{
  width: 30px;
  height: 75px;
  transform: rotateX(-90deg);
  transform-origin: top;
  background-color: hsla(0,100%,50%,0.7);
}
.book-right{
  width: 75px;
  height: 150px;
  left: 30px;
  transform: rotateY(90deg);
  transform-origin: left;
  background-color: hsla(50,100%,50%,0.7);
}
.book-covor{
  width: 30px;
	height: 150px;
  background-color: hsla(100,100%,50%,0.7);
}

for (let i=0; i<10; i++) {
  console.log("現在" + (i+1) + "回目の処理です。");
  $('.rect').clone().after('.rect');
}

補足情報

本棚は全部で５つあるので、.shelf1 から.shelf5まで作りたい

Comments

[miyabi_pudding]

> うまく行きません。

何がどう上手くいかないのでしょうか？

[umi3]

consoleの方はしっかり動いているのですが、本が１０札表示されなくて、１つしか表示されません

[FKM]

どうやってスクリプトを動かしているのですか。みたところ、イベントのトリガーがどこにもなさそうですが。

[umi3]

トリガーといいますか、htmlを簡略化したいだけなので、トリガーはいらないかなと思ったのですが、トリガーを設定しないと出来ないのでしょうか・・・？
もしくは書き方が間違っているのでしょうか？

[FKM]

JavaScriptはhtmlとは独立しているので、ロード時だとかクリック時とかそういうイベントがないと動かないですよ。

[umi3]

そうなんですか。。。
では、htmlでひたすら書いていくしかないですかね？

[FKM]

jQueryならば通常でオンロード呼び出しできますけどね。

[umi3]

なるほど、、、
初めて聞きました、新しく調べてやるとちょっと時間かかりそうなので、一旦htmlでそのまま書こうと思います

[miyabi_pudding]

解決されたのであれば、自己解決の投稿か、BAを選出して、質問を閉じられるとよいかと。

Answer 1

本棚が透視図法的な絵になっているので、並べる本もパースをつけないといけないので
同じ画像を並べてもおかしくなります。
普通にhtmlでimgで任意に書き出せばよいような気がします

Comments

[yambejp]

全部並べておいて、cssで非表示/表示を切り替えるとかでもOK

[umi3]

遅くなってしまい、すみません。。。
ベストアンサーつけ忘れてました。