Javascript + jquery，在for循环内运行

Question

Basically i've got a lot of repetition in my code as im changing a few bits and pieces inside my function to accomodate the different divs such as class name, text and padding. Rather then writing them all out individually like so;

$('.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)');
    });

I'm trying to write a function that will do it for me, i've gotten the functionality down but it kills the rest of my javascript code for some reason.

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

Any help will be greatly appreciated :)

edit--- my 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

Upon inspection of the loop termination condition, I suggest changing

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

to

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

because it looks like you have 6 links, but you set your for-loop to terminate at 6, so titles[6] will cause an OOB error which probably prevents the rest of your code from running.

---

It's also not advisable to put anonymous functions in a loop if you can help it.

I took the liberty of making another way to accomplish your task without using loops. Basically, you can put data into the divs and use just one function to utilize the data and populate your hidden div. There are other ways, but this is just one humble solution.

Oh yes, you can use .stop() to prevent all the animation from chaining up between hovers.

 $('.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

The for loop is terminated with a ; which is a wrong syntax. As Drakes mentioned, defining anonymous functions inside a loop should be avoided as this usually creates closure issues. I have extracted the anonymous function like this:

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