如何迭代 HTML <div> 元素数组并为每个索引号设置不同的样式？

Posted 2023-05-09

【中文标题】如何迭代 HTML <div> 元素数组并为每个索引号设置不同的样式？

【英文标题】：How to iterate an array of HTML <div> elements and style another element differently for each index number?

【发布时间】：2021-02-01 12:27:23

【问题描述】：

我希望 div 的伪元素 ::after 的 content 值在将鼠标悬停在这 6 个 div 中的每一个上时根据 6 个子 div 元素的索引号进行更改。

我坚持创建 6 个 div 的第一个数组和另一个包含 6 个信息的数组，以相同的相应索引号显示。

数组 #1 将是 [.hov-sq:nth-child(1), .hov-sq:..] 数组 #2 将是每次悬停时更改的“数据内容”属性的内容['数字游牧民族'，'数字开发者'，'超人'，'等等...]

到目前为止，我设法使用此 jQuery 代码和 CSS 代码更改了伪元素内容。

$('.hov-sq').hover(function() 
  $('.c-1').attr('data-content', 'frontend developer');
);

.landing-hov-s 
  width: 100vw;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-wrap: wrap;


.hov-sq 
  width: 33.3333333vw;
  height: 50vh;
  z-index: 5000;


.c-1::after 
  /* other styling not relevant to issue */
  content: attr(data-content) '';

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="landing-hov-s">
  <div class="hov-sq"></div>
  <div class="hov-sq"></div>
  <div class="hov-sq"></div>
  <div class="hov-sq"></div>
  <div class="hov-sq"></div>
  <div class="hov-sq"></div>
</div>
<div class="c-1">
  <h1>Laurent<br>&nbsp;&nbsp;&nbsp;Chevrette</h1>
</div>

该页面已在此处正常显示：http://vmax.laurentchevrette.digital/

【问题讨论】：

您能否更清楚地描述您正在尝试做的事情。您的 sn-p 似乎按照您的建议工作，您只需要向其添加更多内容

嗨，谢谢，我真的很想把它说清楚，但我会用更多信息更新它，也不想让它太长。谢谢！

基本上我希望 .c-1 的 ::after 的内容在用户将鼠标悬停在着陆页上的 6 个 div 上时更改，以便交换 6 个不同的信息文本我。

【参考方案1】：

使用index() 确定悬停集合中哪个元素的索引

const content = ['Item 1','Item 2','Item 3','Item 4','Item 5','Item 6'];

const $sq = $('.hov-sq').hover(function() 
  const idx = $sq.index(this);
  $('.c-1').attr('data-content', content[idx]);
, function()
   // remove when mouse leaves if wanted 
   $('.c-1').attr('data-content','')
);

.landing-hov-s 
  width: 100vw;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-wrap: wrap;


.hov-sq 
  width: 33.3333333vw;
  height: 50vh;
  z-index: 5000;


.c-1::after 
  /* other styling not relevant to issue */
  content: attr(data-content) '';

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="landing-hov-s">
  <div class="hov-sq">One</div>
  <div class="hov-sq">Two</div>
  <div class="hov-sq">Three</div>
  <div class="hov-sq">Four</div>
  <div class="hov-sq">Five</div>
  <div class="hov-sq">Six</div>
</div>
<div class="c-1">
  <h1>Laurent<br>&nbsp;&nbsp;&nbsp;Chevrette</h1>
</div>

【讨论】：

非常感谢，我已经坚持了几个小时了。

【参考方案2】：

jQuery的索引方法

如果你使用 jQuery，you have access to the index() method。

我还添加了当鼠标位于悬停 div 的 out 时运行的函数。

也就是说，要小心你不能选择伪元素和 javascript，所以你应该使用 CSS 中的属性选择器来设置它们的样式，如下所示。

$('.hov-sq').hover(function() 
  $('.c-1')
    .attr('data-content', 'frontend developer')
    .attr('data-index', $(this).index());
  console.log($(this).index())
, function() 
  $('.c-1')
    .attr('data-content', '')
    .attr('data-index', '');
);

.landing-hov-s 
  width: 100vw;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-wrap: wrap;


.hov-sq 
  width: 33.3333333vw;
  height: 50vh;
  z-index: 5000;


.c-1::after 
  /* other styling not relevant to issue */
  content: attr(data-content) '';


.c-1[data-index="0"]::after 
  /* Style for index 0 */



/* Rest of the styles */

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="landing-hov-s">
  <div class="hov-sq"></div>
  <div class="hov-sq"></div>
  <div class="hov-sq"></div>
  <div class="hov-sq"></div>
  <div class="hov-sq"></div>
  <div class="hov-sq"></div>
</div>

<div class="c-1">
  <h1>Laurent<br>&nbsp;&nbsp;&nbsp;Chevrette</h1>
</div>