JS初心者です。
サムネイルが付いたbxsliderを複数設置しようとしています。
サムネイルはHTMLに個別記述ではなくJSで自動出力したいと思っています。
●動作が確認できるHTMLとJS
【HTML】
<ul id="hoge"> <li><img src="hoge01.jpg" alt=""></li> <li><img src="hoge02.jpg" alt=""></li> <li><img src="hoge03.jpg" alt=""></li> </ul> <ul class="custom-thumb"></ul>
【JS】
<script> $(function() { var thumbWidth = 150; var thumbHeight = 100; var insert = ''; for (var i = 0; i < $('#hoge li').length; i++) { insert += '<li><a data-slide-index="' + i + '" href="javascript:void(0);"><img src="' + $('#hoge li').eq(i).children('img').attr('src') + '" width="' + thumbWidth + '" height="' + thumbHeight + '"></a></li>'; }; $('.custom-thumb').append(insert); $('#hoge').bxSlider({ pagerCustom: '.custom-thumb', }); }); </script>
上記の場合は単体なので当然動くのですが、今回はスライドを複数設置したいため、
IDにhoge001,hoge002など番号を付随して別々のサムネイルを取得し、それぞれで動かしたいと考えています。
●実際動作させたいHTML
【HTML】
<ul id="hoge001"> <li><img src="hoge01.jpg" alt=""></li> <li><img src="hoge02.jpg" alt=""></li> <li><img src="hoge03.jpg" alt=""></li> </ul> <ul class="custom-thumb"></ul> <ul id="hoge002"> <li><img src="hoge04.jpg" alt=""></li> <li><img src="hoge05.jpg" alt=""></li> <li><img src="hoge06.jpg" alt=""></li> </ul> <ul class="custom-thumb"></ul>
JSでどのようにIDを取得し、各サムネイル画像を出力させれば良いでしょうか?
ご教示ください。どうぞよろしくお願いいたします。
あなたの回答
tips
プレビュー