Question

我有一个简单的功能来循环思考一堆Div进出淡出它们。它运行正常，但我正在尝试在单击DIV时执行该函数。

我想如果我做了像

这样的事情

$('.content').click(InfiniteRotator());

或

$('.content').click(function(){
InfiniteRotator();
});

但是没有运气和建议会受到最高的赞赏

$(window).load(function() {

    function InfiniteRotator() {

        //initial fade-in time (in milliseconds)
        var initialFadeIn = 1000;

        //interval between items (in milliseconds)
        var itemInterval = 5000;

        //cross-fade time (in milliseconds)
        var fadeTime = 1000;

        //count number of items
        var numberOfItems = $('.quote').length;

        //set current item
        var currentItem = 0;

        //show first item
        $('.quote').eq(currentItem).fadeIn(initialFadeIn);

        //loop through the items
        var infiniteLoop = setInterval(function(){
         $('.quote').eq(currentItem).fadeOut(fadeTime);

            if(currentItem == numberOfItems -1){
                 currentItem = 0;
            } else{
                 currentItem++;
            }

            $('.quote').eq(currentItem).fadeIn(fadeTime);

        }, itemInterval);
    }

    InfiniteRotator();


    $('.content').click(InfiniteRotator());


});

Answer 1

只需传递该函数的reference，例如

$('.content').click(InfiniteRotator);

顺便说一句，正如其他人提到的那样，你的以下代码没有问题，

$('.content').click(function(){
   InfiniteRotator();
});

Answer 2

$('.content').click(InfiniteRotator); //<----remove the "()" here

或

$('.content').click(function(){
    InfiniteRotator();
});

现在两者都很好，但你必须在doc ready包装器中调用它，你可以在doc ready之外的全局范围内移动你的函数：

function InfiniteRotator() {
   // your function
}

$(function(){
   $('.content').click(InfiniteRotator); //<---here you can call it
});

您最好使用$(function(){}) doc ready处理程序而不是$(window).load()，因为这不会等待dom完全加载。

如何让我的功能在点击时执行

2 个答案: