- ベストアンサー
div要素内の画像およびテキストリンクのランダム複数表示
いろいろ探しましたが、うまくいっておりません。 サイトのトップページに商品リンクを張る予定で、 数十個ある商品リンクをランダムに5個表示(重複不可)させようと考えています。 それぞれの商品リンクは、 <div class="item"> 中はサムネイル画像、<div>商品名</div>、<div>商品説明</div>、<div>価格</div> </div> といった感じです。 5個の<div class="item">～</div>をランダムに表示させるjavascriptは、 どのように記述したらよいのでしょうか？ よろしくお願いいたします。
- hirore
- お礼率75% (9/12)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <title>サンプル</title> <ul id="p"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>10</li> </ul> <script type="text/javascript"> //@cc_on window./*@if(@_jscript)attachEvent('on'+ @else@*/addEventListener(/*@end@*/'load', function () { var a=document.getElementById('p'),c=a.childNodes,i=0,o,j=0,n=5; while(o=c[i++])if(1!=o.nodeType)a.removeChild(o); i=a.childNodes.length; while(i)a.appendChild((c[r=Math.random()*i--|0].style.display=j++<n?'block':'none',c[r])); }, false); </script>
お礼
早速ありがとうございます！ この方法は使えそうですね！！ 重ねて質問で申し訳ないのですが、SSIやPHPを使わずにリストの部分をシンプルに外部化できないでしょうか？ ひとつの商品リンクが結構なボリュームになるので、index.htmlに直接記述するのは避けたいのですが。 よろしくお願いいたします。
補足
javascriptのdocument.writeでなんとかいけそうです。 記述がめんどくさいですが、excelとかでやってみます！ ありがとうございました！！