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