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

Question

我希望contentadiv的伪元素的值::after随着 6 个子元素的索引号而改变div，将鼠标悬停在这 6 个 div 中的每一个上。我坚持创建 6 个 div 的第一个数组和另一个包含 6 个信息的数组以显示相同的对应索引号。数组 #1 将是 [.hov-sq:nth-child(1), .hov-sq:..] 并且数组 #2 将是每次悬停时更改的 'data-content' 属性的内容 ['digital游牧民族'，'数字开发者'，'超人'，'等等...]到目前为止，我设法使用这个 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>

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，则可以访问该index()方法。

out我还添加了一旦鼠标位于悬停的 div 上就会运行的函数。

也就是说，请注意您不能选择伪元素和 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>