1

ページの上部に10個の画像があり、ページの後半にそれらの画像に関する10個のパラグラフが含まれている静的ページがあります。私はランダムに4つの画像（解決策を見つけました）を表示したいのですが、画像に関する段落を非表示/表示する必要があるため、後でそれらをテキストdivに一致させる方法がわかりません

html：

<div id="images">
 <div><img src="img1"></div>
 <div><img src="img2"></div>
 ...
 <div><img src="img10"></div>
</div>

以降のページ

<div id="text">
 <p>text about image 1</p>
 <p>text about image 2</p>
 ...
 <p>text about image 10</p>
</div>

randomElements = jQuery("#images div").get().sort(function(){ 
 return Math.round(Math.random())-0.5
}).slice(0,4)

私が選んだランダムな画像と同じ段落を表示するには、:nth-child()セレクターを使用する必要があると思います。しかし、から子番号を取得する方法を見つけることができませんでしたrandomElements。

4

3 に答える 3

1

すべての画像がDOMに存在する（そして単に表示/非表示にされる）と仮定すると、次のことをお勧めします。

$('#images div:visible').each(
    function(){
        var i = $(this).index()
        $('#text p').eq(i).show();
    });

参照：

于 2012-05-24T23:30:36.263 に答える
0

.index（）を使用して、画像を含むdivタグと一致する段落タグを見つけることができます。1から10までの6つのランダムで一意の整数を取得する関数を作成します。jqueryを使用して、そのインデックスを持つdivタグとparagraphタグを削除します。

于 2012-05-24T23:30:45.080 に答える
0

可能であれば、HTMLを再配置します。これははるかにセマンティックフレンドリーであり、現在のランダム選択は引き続き機能するはずです。

<div id="images">
  <div>
    <img src="img1">
    <p>text about image 1</p>
  </div>
  <div>
    <img src="img2">
    <p>text about image 2</p>
  </div>
  ...
  <div>
    <img src="img10">
    <p>text about image 10</p>
  </div>
</div>
于 2012-05-24T23:35:10.260 に答える