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

检查循环终止条件后，我建议更改

var input = [
    {
        name: 'foo',
        url: '/somewhere1',
        templateUrl: 'foo.tpl.html',
        title: 'title A',
        subtitle: 'description A'
    },
    {
        name: 'foo.bar',
        url: '/somewhere2',
        templateUrl: 'anotherpage.tpl.html',
        title: 'title B',
        subtitle: 'description B'
    },
    {
        name: 'buzz.fizz',
        url: '/another/place',
        templateUrl: 'hello.tpl.html',
        title: 'title C',
        subtitle: 'description C'
    },
    {
        name: 'foo.hello.world',
        url: '/',
        templateUrl: 'world.tpl.html',
        title: 'title D',
        subtitle: 'description D'
    }
];

var nameList = _.sortBy(_.pluck(input, 'name'));
var structure = {};

var mapNav = function(name, navItem) {
    return {
        name : name,
        url : navItem.url,
        templateUrl : navItem.templateUrl,
        data : { title : navItem.title, subtitle : navItem.subtitle },
        children : []
    };
};

_.map(nameList, function(fullPath) {
    var path = fullPath.split('.');
    var parentItem = {};
    _.forEach(path, function(subName, index) {
        var navItem = _.find(input, { name : fullPath });
        var item = mapNav(subName, navItem);
        if (index == 0) {
            structure[subName] = item;
        } else {
            parentItem.children.push(item);
        }
        parentItem = item;
    });
});


var finalStructure = Object.keys(structure).map(function(key) {
    return structure[key];
});

console.log(finalStructure);

到

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

因为看起来你有6个链接，但你将for循环设置为6，所以for (i = 0; i < titles.length; i++) {会导致OOB错误，这可能会阻止你的其余代码运行。

如果可以提供帮助，也不建议将匿名函数放在循环中。

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

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

titles[6]

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

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

Javascript + jquery，for循环中的函数

2 个答案: