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

【问题标题】：How can I perform for/loop with functions with jquery如何使用 jquery 执行 for/loop 函数
【发布时间】：2019-05-11 05:32:29
【问题描述】：

如何避免在 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次，另外nth-child也会变我等待你的帮助。谢谢

【问题讨论】：

请也向我们展示您的 HTML 代码。你可能根本不需要循环。
而不是使用nth:child，您可以使用jQuery.each，您可以从下面的链接中找到更多详细信息。 api.jquery.com/each
请更具体地说明您要实现的目标 - 您是将其应用于所有 .slider_section- 还是仅应用于一些？从表面上看，您不需要循环，如果有 5 个元素，则只需 $(".slider_section-pc").hover(...。如果超过 5 个并且您只想要前 5 个，那么您可以使用$(".slider_section-pc:nth-child(-n+5)").hover(...。鉴于目前提供的信息，这些都不能保证“循环”。
另外，1 到 :nth-child 是基于 1 的跨度>
我已经更新了我的代码，请帮助我

标签： jquery loops for-loop css-selectors

【解决方案1】：

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");
}

【讨论】：

我试图这样做，但它不起作用 function ocultarDescription() { $('.slider__description').css("visibility", "hidden"); } function MostrarDescription() { $('.slider__description').css("visibility", "visible"); } $('.slider__section-pc').each(function(){ $(this).hover(ocultarDescription(), MostrarDescription()); });
如果新的细节解决了您在 cmets 中的新问题，请为答案投票。 @user7509372
@Ali Sheikhpour 我不能，因为他说我是新人

【解决方案2】：

使用您的原始代码，您可以保持方法内联，但使用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() {

【讨论】：

我需要将它应用到所有部分。您未注释的第一个代码不起作用，消息出来：不要在循环内创建函数。这就是我分离功能的原因。我已经更正了我的代码，请再看一遍。
不确定我是否理解 - 上面的第一个代码 sn-p 注释为“使用 this 而不是 i” - 查找 $(this).find(...。谁告诉您不要将函数放入循环中并没有向您解释原因。在循环内的函数内使用i 的主要问题是，在执行函数（在事件处理程序上）时，i 将继续前进。使用this 没有这个问题。