Javascript + jquery，for循环中的函数

Question

基本上我在代码中有很多重复，因为我正在改变函数中的几个小块，以适应不同的div，比如类名，文本和填充。而不是像这样单独写出它们;

$('.about').hover(function() { 
     $('.clickable7').text("Find out about us").css('padding-top', '137px').fadeIn(200); 
     $('.positional').css("background-image", "none"); 
    }, 
    function() { 
     $('.clickable7').fadeOut(200); 
     $('.positional').css('background-image', 'url(assets/imgs/prototype6.png)'); 
    }); 
$('.friends').hover(function() { 
     $('.clickable7').text("Meet our Friends").css('padding-top', '137px').fadeIn(200); 
     $('.positional').css("background-image", "none"); 
    }, 
    function() { 
     $('.clickable7').fadeOut(200); 
     $('.positional').css('background-image', 'url(assets/imgs/prototype6.png)'); 
    }); 

我想编写一个函数，将做到这一点对我来说，我已经得到的功能下降，但它杀死我的javascript代码，其余的某些原因。

var titles = [ 
    { 
     name: ".about", 
     text: "find out about us", 
     padding: 137 
    }, 
    { 
     name: ".friends", 
     text: "meet our friends", 
     padding: 137 
    } 
]; 

for (i = 0; i <= 6; i++) { 
    (function(index) { 
     var name = titles[index].name; 
     var text = titles[index].text; 
     var padding = titles[index].padding; 

     $(name).hover(function() { 
      $('.clickable7').text(text).css('padding-top', padding).fadeIn(200); 
      $('.positional').css("background-image", "none"); 
     }, 
     function() { 
      $('.clickable7').fadeOut(200); 
      $('.positional').css('background-image', 'url(assets/imgs/prototype6.png)'); 
     }); 
    })(i); 
}; 

任何帮助，将不胜感激:)

编辑---我的HTML

<div class="positional"> 
<a href="#about"> 
    <div class="about click">About</div> 
</a> 
<a href="#friends"> 
    <div class="friends click">Friends</div> 
</a> 
<a href="#"> 
    <div class="purpose click">Purpose</div> 
</a> 
<a href="#"> 
    <div class="empowerment click">Empowerment</div> 
</a> 
<a href="#contact"> 
    <div class="contact click">Contact Us</div> 
</a> 
<a href="#"> 
    <div class="passion click">Passion</div> 
</a> 

<div class="clickable7"></div> 

Answer 1

在的循环终止条件的检查，我建议改变

for (i = 0; i <= 6; i++) { 

到

for (i = 0; i < titles.length; i++) { 

，因为它看起来你有6个环节，但您将for循环的6终止，所以titles[6]会导致这可能阻止你的代码的其余部分从运行的OOB错误。

---

如果你能提供帮助，将匿名函数放在循环中也不可取。

我冒昧地另辟蹊径，在不使用循环的情况下完成任务。基本上，您可以将data放入div中，并只使用一个函数来利用数据并填充隐藏的div。还有其他方法，但这只是一个简单的解决方案。

哦是的，你可以使用.stop()来防止所有的动画链接在盘旋之间。

$('.click').hover(function() { 
 
    $this = $(this); 
 
    $('.clickable7') 
 
    .text($this.data('text')) 
 
    .css('padding-top', $this.data('padding')) 
 
    .stop() 
 
    .fadeIn(200); 
 
}, function() { 
 
    $('.clickable7') 
 
    .stop() 
 
    .fadeOut(200); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="positional"> 
 
    <a href="#about"> 
 
    <div class="about click" data-text="Find out about us" data-padding="37">About</div> 
 
    </a> 
 
    <a href="#friends"> 
 
    <div class="friends click" data-text="Meet our Friends" data-padding="57">Friends</div> 
 
    </a> 
 
    <a href="#"> 
 
    <div class="purpose click" data-text="See our purpose" data-padding="97">Purpose</div> 
 
    </a> 
 
    <a href="#"> 
 
    <div class="empowerment click" data-text="Be empowered!" data-padding="17">Empowerment</div> 
 
    </a> 
 
    <a href="#contact"> 
 
    <div class="contact click" data-text="Contact us" data-padding="69">Contact Us</div> 
 
    </a> 
 
    <a href="#"> 
 
    <div class="passion click" data-text="Yay, passion!" data-padding="88">Passion</div> 
 
    </a> 
 
    <div class="clickable7"></div>

Answer 2

的for环路端接一个;这是一种错误的语法。正如Drakes所述，应该避免在循环中定义匿名函数，因为这通常会导致闭包问题。我已提取的匿名函数是这样的：

(function($){ 
    var i, 
     titles = [ 
     { 
      name: ".about", 
      text: "find out about us", 
      padding: 137 
     }, 
     { 
      name: ".friends", 
      text: "meet our friends", 
      padding: 137 
     } 
    ]; 

    function bindHoverHandlers(index){ 
     var name = titles[index].name, 
      text = titles[index].text, 
      padding = titles[index].padding; 

     $(name).hover(function() { 
      $('.clickable7').text(text).css('padding-top', padding).fadeIn(200); 
      $('.positional').css("background-image", "none"); 
     }, function() { 
      $('.clickable7').fadeOut(200); 
      $('.positional').css('background-image', 'url(assets/imgs/prototype6.png)'); 
     }); 
    } 

    for (i = 0; i < titles.length; i++) { 
     bindHoverHandlers(i); 
    } 
}(window.jQuery));