时间戳

首页 > 解决方案 > 如何使用 jquery 执行 for/loop 函数

jquery - 如何使用 jquery 执行 for/loop 函数

问题描述

如何避免在 Jquery 中使用 For / each 重复以下代码行？

$('.slider__section:nth-child(1)').hover(function(){
  $('.slider__description').css("visibility", "hidden");
  $('.slider__section:nth-child(1) .slider__description').css("visibility", "visible");
  }, function(){
  $('.slider__description').css("visibility", "visible");
});

HTML：

<div class="slider">
  <div class="slider__section">
    <div class="slider__description">1</div>
  <div>
  <div class="slider__section">
    <div class="slider__description">2</div>
  <div>
  <div class="slider__section">
    <div class="slider__description">3</div>
  <div>
  <div class="slider__section">
    <div class="slider__description">4</div>
  <div>
  <div class="slider__section">
    <div class="slider__description">5</div>
  <div>
  <div class="slider__section">
    <div class="slider__description">6</div>
  <div>
  <section class="fondo-slider"></section>
 </div>

我想将此应用于 6 个元素，但我不想重复此代码尝试这样做，但它不起作用

function ocultarDescription() {
  $('.slider__description').css("visibility", "hidden");
  $('.slider__section:nth-child('+i+').slider__description').css("visibility", "visible");
}
function MostrarDescription() {
  $('.slider__description').css("visibility", "visible");
}
for (var i = 1; i < 6; i++) { 
  $('slider__section:nth-child('+i+')').hover(ocultarDescription, MostrarDescription);
}

我想重复6次，另外，第n个孩子也会改变我等待你的帮助。谢谢

标签： jqueryloopsfor-loopcss-selectors

解决方案

使用您的原始代码，您可以保持方法内联，但使用this而不是i：

for (var i = 1; i <= 6; i++) {

  $('.slider__section:nth-child(i)').hover(function() {
    $('.slider__description').css("visibility", "hidden");
    $(this).find('.slider__description').css("visibility", "visible");
  }, function(){
    $('.slider__description').css("visibility", "visible");
  });
}

如果您希望这适用于所有人.slider__section，则无需循环：

$('.slider__section').hover(function() {
  $('.slider__description').css("visibility", "hidden");
  $(this).find('.slider__description').css("visibility", "visible");
}, function(){
  $('.slider__description').css("visibility", "visible");
});

如果您希望它仅适用于前 6 个元素而不再适用：

$('.slider__section:nth-child(-n+6)').hover(function() {

更多信息-n+6：https ://www.w3.org/TR/selectors-3/#nth-child-pseudo

推荐阅读