Question

我有以下jQuery

<script type="text/javascript">
        jQuery(function(){              
            jQuery('.link1').click(function(){
                jQuery('.hide-div').hide();
                jQuery('.toggle1').show();
                jQuery('#arrow').css({top: '0px'});
            });

            jQuery('.link2').click(function(){
                jQuery('.hide-div').hide();
                jQuery('.toggle2').show();
                jQuery('#arrow').css({top: '42px'});
            });

            jQuery('.link3').click(function(){
                jQuery('.hide-div').hide();
                jQuery('.toggle3').show();
                jQuery('#arrow').css({top: '84px'});
            });

            jQuery('.link4').click(function(){
                jQuery('.hide-div').hide();
                jQuery('.toggle4').show();
                jQuery('#arrow').css({top: '125px'});
            });

            jQuery('.link5').click(function(){
                jQuery('.hide-div').hide();
                jQuery('.toggle5').show();
                jQuery('#arrow').css({top: '166px'});
            });

            jQuery('.link6').click(function(){
                jQuery('.hide-div').hide();
                jQuery('.toggle6').show();
                jQuery('#arrow').css({top: '207px'});
            });
        });


        jQuery(function(){
            jQuery("#toggle-links ul > li > a").click(function(e){
                e.preventDefault();
            jQuery("#toggle-links ul > li > a").addClass("selected").not(this).removeClass("selected");
            });
        });
    </script>

并且需要添加一个函数，它将按顺序运行click1，link2，link3 ...每3秒直到它到达link6然后它将循环回到link1并且如果用户将鼠标悬停在div上使用id #holder，函数将停止运行直到mouseout。我有点难过这样做，有什么想法吗？

Answer 1

尝试：

var interval = null;

jQuery(function(){
  interval = setInterval(callFunc, 3000);
});

function callFunc(){
  jQuery('.link1, .link2, .link3').trigger('click');
}

任何时候您都可以通过以下方式停止自动点击：

clearInterval(interval);

要按顺序调用它们，您可以像这样修改代码：

        jQuery('.link1').click(function(){
            jQuery('.hide-div').hide();
            jQuery('.toggle1').show();
            jQuery('#arrow').css({top: '0px'});

            // click link2
            jQuery('.link2').trigger('click');
        });

        jQuery('.link2').click(function(){
            jQuery('.hide-div').hide();
            jQuery('.toggle2').show();
            jQuery('#arrow').css({top: '42px'});

            // click link3
            jQuery('.link3').trigger('click');
        });

Answer 2

这可能会有所帮助：

<script type="text/javascript">

    var countClicks = 0;

    function runClicks(){   

        if (countClicks >= 6)   
            countClicks = 0;

        countClick++; 

        jQuery('.link' + countClicks.toString()).click(function(){
            jQuery('.hide-div').hide();
            jQuery('.toggle' + countClicks.toString()).show();
            jQuery('#arrow').css({top: '0px'});
        });
    }

    jQuery(function(){  
        setInterval("runClicks()", 3000);

        jQuery('#holder').hover( function() {
               clearInterval("runClicks()", 3000);
        });

        jQuery('#holder').mouseout( function() {
               setInterval("runClicks()", 3000);
        })
    });


</script>

Answer 3

我认为你最好的选择是重构代码以使程序化程度更高，更容易实现，然后使用jQuery插件进行计时。下面是我使用jQuery Timers Plugin快速编写的演示。您可能需要稍微修改它以满足您的需求，但我认为这大致是您正在寻找的。

HTML

<div id="links">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
    <a href="#">Link 4</a>
    <a href="#">Link 5</a>
    <a href="#">Link 6</a>
</div>

<div class="toggle">toggle 1</div>
<div class="toggle">toggle 2</div>
<div class="toggle">toggle 3</div>
<div class="toggle">toggle 4</div>
<div class="toggle">toggle 5</div>
<div class="toggle">toggle 6</div>

<div id="arrow">Arrow</div>

<div id="holder">Pause Box</div>

<强>的Javascript

<script type="text/javascript">
$(document).ready(function() {
    links = $('#links a');          // Get all the toggling links
    boxes = $('div.toggle');        // Get all toggle boxes
    var myTimer = $.timer();        // Instantiate a timer

    // Bind our processing function to the links
    links.click(runProcess);

    // Setup timer  
    myTimer.set({
            action : function() {
                var selectedIndex = (links.filter('.selected').index() + 1) % links.length;
                links.eq( selectedIndex ).trigger('click');
            },
            time : 3000
    }).play();

    // Bind pause/play to #holder and links so that timer does not run when user hovers
    // over holder box or links area
    $('#holder, #links').hover( function(){ myTimer.pause(); }, function() { myTimer.play(); });
});

// Do stuff when a link is clicked or triggered
function runProcess(e)
{
    var arrowTopPositions = new Array('0', '42px', '84px', '125px', '166px', '207px');  // Create array of 'top' positions for #arrow
    var index = $(this).index();    // Get index of this link
    var arrow = $('#arrow');        // Get #arrow element

    $(this).addClass("selected").siblings().removeClass("selected");    // Add class to the selected link and remove class from siblings
    boxes.eq( index ).show();                                           // Show toggle box that has same ordinal index as this link
    arrow.css('top', arrowTopPositions[ index ]);                       // Position arrow using position array and index of this link
    e.preventDefault();                                                 // ya know, prevent default behavior of link
}
</script>

Jquery每隔x秒运行一次点击功能

3 个答案: