删除随机项目，

Removing random items,

本文关键字：项目 随机 删除      更新时间：2023-09-26

我有一个静态页面，页面顶部包含 10 张图像，页面后面有 10 张关于这些图像的参数。我随机想显示 4 张图像（我找到了解决方案），但我不确定如何将这些图像与稍后出现的文本div 相匹配，因为我应该隐藏/显示有关图像的段落

该网页：

<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中获取儿童号码。

假设所有图像都存在于 DOM 中（并且只是显示/隐藏），那么我建议：

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

引用：

  • eq() .
  • index() .
  • show() .
  • :visible选择器。

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

如果可以的话，我会重新排列你的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>
相关文章：