Как я могу выполнить для / цикл с функциями с JQuery

Question

Как я могу избежать повторения следующей строки кода, используя For / each в Jquery?

$('.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-ребенок также изменится Я жду вашей помощи. Спасибо

Answer 1

Исходя из исходного кода, вы можете оставить методы встроенными, но используйте 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

Answer 2

Jquery each может сделать это:

$('slider__section-pc').each(function(){
     $(this).hover( //do your stuff here);
})

, если вы хотите поместить функцию в вышеприведенный материал, вам нужна ссылка на this для передачи этим функциям:

$('slider__section-pc').each(function(){
     var x=$(this);
     $(this).hover(ocultarDescription(x),MostrarDescription(x));
})

и затем использовать X в целевых функциях, например:

function ocultarDescription(x){
  $('.slider__description').css("visibility", "hidden");
  x.find(".slider__description').css("visibility", "visible");
}