- 締切済み
<li>の画像およびテキストリンクのランダム複数表示
javascriptでランダム表示する方法を教えて下さい。 サイト内に商品の一覧を作成しようと考えており、それぞれの商品画像、テキストリンクをランダムで動かしたいと思っております。 商品数は10点くらいになる予定です。 <div id="sample"> <ul> <li> <dl> <dt>商品1</dt> <dd>商品画像</dd> <dd>商品コメント</dd> </dl> </li> <li> <dl> <dt>商品2</dt> <dd>商品画像</dd> <dd>商品コメント</dd> </dl> </li> </ul> </div> ソースはこんな感じで、10点程の掲載予定です。 <li>～～</li>リスト10点をランダム表示する javascriptを教えて下さい。 よろしくお願いいたします。
- iroom0928
- お礼率43% (7/16)
- JavaScript
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
みんなの回答
ランダムに１つだけと勘違い！ごめん。でっ。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <title>サンプル</title> <ul id="sample"> <li> <dl> <dt>商品0</dt> <dd>商品画像</dd> <dd>商品コメント</dd> </dl> </li> <li> <dl> <dt>商品1</dt> <dd>商品画像</dd> <dd>商品コメント</dd> </dl> </li> <li> <dl> <dt>商品2</dt> <dd>商品画像</dd> <dd>商品コメント</dd> </dl> </li> <li> <dl> <dt>商品3</dt> <dd>商品画像</dd> <dd>商品コメント</dd> </dl> </li> </ul> <script type="text/javascript"> //@cc_on /*@if(@_jscript)attachEvent('on'+ @else@*/addEventListener(/*@end@*/'load', function(){ Array.prototype.shuffle_FY = function () { var n = this.length; var r; var w; while (n) { r = Math.random() * n |0; w = this[--n]; this[n] = this[r]; this[r] = w; } return this; } var rnd; var cnt = 0; var prt = document.getElementById('sample'); var obj = prt.firstChild; var objs = []; var num = []; do if (obj.nodeName == 'LI' ) { objs.push(obj), num.push(cnt++) } while (obj = obj.nextSibling); num.shuffle_FY(); while (cnt) prt.appendChild(objs[num[--cnt]]); }, false); </script>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <title>サンプル</title> <ul id="sample"> <li> <dl> <dt>商品1</dt> <dd>商品画像</dd> <dd>商品コメント</dd> </dl> </li> <li> <dl> <dt>商品2</dt> <dd>商品画像</dd> <dd>商品コメント</dd> </dl> </li> </ul> <script type="text/javascript"> //@cc_on /*@if(@_jscript)attachEvent('on'+ @else@*/addEventListener(/*@end@*/'load', function(){ var rnd; var cnt = 0; var obj = document.getElementById('sample').firstChild; var objs = []; do { if (obj.nodeName == 'LI' ) { cnt++; obj.style.display = 'none'; objs.push(obj); } } while (obj = obj.nextSibling); rnd = Math.floor(Math.random() * cnt); objs[rnd].style.display = 'block'; }, false); </script>
お礼
有り難う御座います。 早速試したのですが、並べてる商品が消えてしまいます。 説明不足により、うまく伝わっておりませんでした。 商品の一覧を更新する都度、並び替えたいのですが、 どのようにすればよいですか？ 宜しくお願い致します。