JavaScriptで、クリックしたときに画像の切り替えをしたい

Question

質問が2つあります!
よくサイトで、
< 1 2 3 4 5 >
このようなものがあって、数字だったり > をクリックするとページ更新して次の何件かを表示みたいなのがあると思います。これを、クリックするとページを更新せずに、画像だけを3枚変更するプログラムを作っています。分かりにくいと思うので補足すると、

| A画像 | B画像 | C画像 |
< 1 2 3 4 5 >

ここで、1がアクティブになっているとして、2を押すと次の3件がページ再読み込みなしに

| D画像 | E画像 | F画像 |
< 1 2 3 4 5 >

となるプログラムです。

流れとしては、

1.PHPでDBから画像パスを15件分配列rec0[]に入れ、JavaScriptの配列rec1[]に渡す

2.JavaScriptで画像を3枚表示する　←　1つ目の質問です
変数 i に0を入れ、1づつ加算を2回しながら、rec1[]を変数展開していく

3.　< 1 2 3 4 5 >　部分をクリックすることで、
変数 i を入れ替えることで画像切り替え　←　2つ目の質問です
（例えば2をクリックしたら、iに3を代入）

1つ目の質問

JavaScriptで3枚画像を表示したいのですがうまくいきません

		<script type="text/javascript">
		document.write("
		<table class = d  id=Table2 runat=server  style=height: 31px>
		<tr class=auto-style17>
		<td class=auto-style16 style=width: 200px; height: 200px>
		<img height=200 src='{$rec1['0']['Thumbnail']}' width=200 alt=*/></td>

		<td class=auto-style16 style=width: 200px; height: 200px>
		<img height=200 src='{$rec1['1']['Thumbnail']}' width=200 alt=*/></td>

		<td class=auto-style16 style=width: 200px; height: 200px>
		<img height=200 src='{$rec1['2']['Thumbnail']}' width=200 alt=*/></td>
		</tr>
		</table>
		")
		</script>

(今の状態だとrec[0][Thumbnail]となっていますが、最終的には
rec[i][Thumbnail]としたいです）
document.write()の使い方が間違っていると思うんですが、どうでしょう。
2つ目の質問

変数 i を入れ替える方法はあるでしょうか？
document.getElementById（）だと、HTMLは変更できても、変数は変更できないのでしょうか？

分かりにくい質問ですみません。どうぞよろしくお願いします。

もし、そもそも流れから変えたほうがいいならそちらもご指摘お願いします。

Answer 1

JavaScriptで3枚画像を表示したいのですがうまくいきません

javascriptでは文字列内で改行をする場合、\をいれてエスケープします。

        document.write("\
        <table class = d  id=Table2 runat=server  style=height: 31px>\
        <tr class=auto-style17>\
        <td class=auto-style16 style=width: 200px; height: 200px>\
        <img height=200 src='{$rec1['0']['Thumbnail']}' width=200 alt=*/></td>\
\
        <td class=auto-style16 style=width: 200px; height: 200px>\
        <img height=200 src='{$rec1['1']['Thumbnail']}' width=200 alt=*/></td>\
\
        <td class=auto-style16 style=width: 200px; height: 200px>\
        <img height=200 src='{$rec1['2']['Thumbnail']}' width=200 alt=*/></td>\
        </tr>\
        </table>\
        ")

---

　

document.getElementById（）だと、HTMLは変更できても、変数は変更できないのでしょうか？

document.getElementByIdではHTMLは変更できませんし、ソースにも見当たらないです。なにか勘違いをされているかと思います。
ソースを見る限り、smartyあたりを使っているのではないかな、と思います。であれば、iもPHPでループを書いたほうがいいかと思います。

Comments

[MiyaTatu]

返信が遅れて申し訳ありません。ご丁寧な回答ありがとうございます！
なるほど、JSの文字列改行にはエスケープが必要なんですね・・・。うまくいかないわけですね。
smartyは初めて聞きましたが、これも便利そうですね！いろいろと教えてくださってありがとうございます。質問への的確な回答ということで、ベストアンサーにさせていただきます！

Answer 2

質問に対する直接の回答ではありませんが、ページを切り替えて表示するような仕組みをページネーションといいます。
jQueryにはページネーション機能用プラグインがたくさんありますので、用途に合わせてお好きなものをどうぞ。
https://www.webprofessional.jp/jquery-pagination-plugins/

Comments

[MiyaTatu]

返信が遅れて申し訳ありません。
早速jQueryを勉強したところ、まさに私が実現したい機能がそろっていました。まだまだ勉強不足なので、ともかく実現に向けて試行錯誤しようと思います。本当にありがとうございました！

Answer 3

流れとしては最初から読み込むのではなく画像情報をajaxで都度取りに行けばいいと思います。srcに当たる画像urlを取りに行って書き換えるだけです
調整が必要なのは端数処理、末尾のデータで端数が出た場合
srcを書き換えられないので、noimage的なものを用意するか
imgを消す処理が必要です

Comments

[MiyaTatu]

返信が遅れて申し訳ありません。
Ajaxを勉強すると、確かにそのほうが実装が簡単だなと感じました。まだAjaxの勉強段階なので最終的にどうなるかはわかりませんが、回答者様のご意見のおかげで解決の糸口が見つかったと思います。ありがとうございました！

[MiyaTatu]

本当にありがとうございました