Question

我有一个静态页面,页面顶部有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)

要显示与我所选随机图像相同的段落, 我想我应该使用 < code>:nth- child () 选择器。但我无法找到如何从 < code> randomElements 获取儿童号码。

Answer 1

假设DOM内存在所有图像(仅显示/隐藏),那么我建议:

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

参考文献:

Answer 2

您可以使用 < a href=" "http://api.jquery.com/index/" rel="nofollow". index () 来找到与包含图像的 div 标记相排的段落标记。创建一个函数, 6个随机、唯一整数在 1 至 10 之间; 将 div 和段落标记与该索引的 jquery 一起删除。

Answer 3

如果可以的话,我会重新排列你的 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>

友情链接