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

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

您可以使用.index()查找与包含图像的 div 标签对齐的段落标签。创建一个获取 1 到 10 之间的六个随机唯一整数的函数;使用 jquery 删除具有该索引的 div 和段落标签。

于 2012-05-24T23:30:45.080 回答