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

Question

我希望 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/

Answer 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>

Answer 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>