Javascript 单击事件的jQuery计时器

我们的网站上有一个事实页面，其代码如下：

<div class='buttonplacer'>
<button class="facts-button1">Fun Fact #1</button> 
<button class="facts-button2">Fun Fact #2</button> 
<button class="facts-button3">Fun Fact #3</button> 
<button class="facts-button4">Fun Fact #4</button> 
<button class="facts-button5">Fun Fact #5</button> 
<button class="facts-button6">Fun Fact #6</button> 
</div>
</div>


<script> 

jQuery(".facts-button1").click(function(){
    jQuery('#fact-img').attr('src', '/img/backgrounds/fact1-img.png');
    jQuery("#fact1").removeClass("hide");
    jQuery("#fact-standaard").addClass("hide");
    jQuery("#fact2").addClass("hide");
    jQuery("#fact3").addClass("hide");
    jQuery("#fact4").addClass("hide");
    jQuery("#fact5").addClass("hide");
    jQuery("#fact6").addClass("hide");
});

jQuery(".facts-button2").click(function(){
   jQuery('#fact-img').attr('src', '/img/backgrounds/fact2-img.png');
    jQuery("#fact2").removeClass("hide");
    jQuery("#fact-standaard").addClass("hide");
    jQuery("#fact1").addClass("hide");
    jQuery("#fact3").addClass("hide");
    jQuery("#fact4").addClass("hide");
    jQuery("#fact5").addClass("hide");
    jQuery("#fact6").addClass("hide");
});

jQuery(".facts-button3").click(function(){
   jQuery('#fact-img').attr('src', '/img/backgrounds/fact3-img.png');
    jQuery("#fact3").removeClass("hide");
    jQuery("#fact-standaard").addClass("hide");
    jQuery("#fact2").addClass("hide");
    jQuery("#fact1").addClass("hide");
    jQuery("#fact4").addClass("hide");
    jQuery("#fact5").addClass("hide");
    jQuery("#fact6").addClass("hide");
});



jQuery(".facts-button4").click(function(){
   jQuery('#fact-img').attr('src', 'img/backgrounds/fact4-img.png');
    jQuery("#fact4").removeClass("hide");
    jQuery("#fact-standaard").addClass("hide");
    jQuery("#fact2").addClass("hide");
    jQuery("#fact3").addClass("hide");
    jQuery("#fact1").addClass("hide");
    jQuery("#fact5").addClass("hide");
    jQuery("#fact6").addClass("hide");
});

jQuery(".facts-button5").click(function(){
   jQuery('#fact-img').attr('src', '/img/backgrounds/fact5-img.png');
    jQuery("#fact5").removeClass("hide");
    jQuery("#fact-standaard").addClass("hide");
    jQuery("#fact2").addClass("hide");
    jQuery("#fact3").addClass("hide");
    jQuery("#fact4").addClass("hide");
    jQuery("#fact1").addClass("hide");
    jQuery("#fact6").addClass("hide");
});

jQuery(".facts-button6").click(function(){
   jQuery('#fact-img').attr('src', '/img/backgrounds/fact6-img.png');
    jQuery("#fact6").removeClass("hide");
    jQuery("#fact-standaard").addClass("hide");
    jQuery("#fact2").addClass("hide");
    jQuery("#fact3").addClass("hide");
    jQuery("#fact4").addClass("hide");
    jQuery("#fact5").addClass("hide");
    jQuery("#fact1").addClass("hide");
});




</script> 

  </div>

<div class="col-md-1"> </div>
<?php $lang_code = icl_object_id(15,'page', true, ICL_LANGUAGE_CODE); ?>

<div id="facts-right" class="col-md-4" >
    <div id="fact-standaard">
<?php the_field( "fact_1", $lang_code );  ?></div>  
 <div id="fact1" class="hide">
<?php the_field( "fact_1", $lang_code);  ?>
</div>
 <div id="fact2" class="hide">
<?php the_field( "fact_2", $lang_code );  ?>
</div>
 <div id="fact3" class="hide">
<?php the_field( "fact_3", $lang_code );  ?>
</div>
 <div id="fact4" class="hide">
<?php the_field( "fact_4", $lang_code );  ?>
</div>
 <div id="fact5" class="hide">
<?php the_field( "fact_5", $lang_code );  ?>
</div>
 <div id="fact6" class="hide">
<?php the_field( "fact_6", $lang_code );  ?>
</div>

有趣的事实#1
有趣的事实#2
有趣的事实#3
有趣的事实#4
有趣的事实#5
有趣的事实#6
jQuery（“.facts-button1”）。单击（函数（）{
jQuery（'#fact img'）.attr（'src'，'/img/backgrounds/fact1 img.png'）；
jQuery（“事实1”）.removeClass（“隐藏”）；
jQuery（“事实标准”）.addClass（“隐藏”）；
jQuery（“事实2”）.addClass（“隐藏”）；
jQuery（“事实3”）.addClass（“隐藏”）；
jQuery（“事实4”）.addClass（“隐藏”）；
jQuery（“#fact5”）.addClass（“隐藏”）；
jQuery（“事实6”）.addClass（“隐藏”）；
});
jQuery（“.facts-button2”）。单击（函数（）{
jQuery（'#fact img'）.attr（'src'，'/img/backgrounds/fact2 img.png'）；
jQuery（“事实2”）.removeClass（“隐藏”）；
jQuery（“事实标准”）.addClass（“隐藏”）；
jQuery（“事实1”）.addClass（“隐藏”）；
jQuery（“事实3”）.addClass（“隐藏”）；
jQuery（“事实4”）.addClass（“隐藏”）；
jQuery（“#fact5”）.addClass（“隐藏”）；
jQuery（“事实6”）.addClass（“隐藏”）；
});
jQuery（“.facts-button3”）。单击（函数（）{
jQuery（'#fact img'）.attr（'src'，'/img/backgrounds/fact3 img.png'）；
jQuery（“事实3”）.removeClass（“隐藏”）；
jQuery（“事实标准”）.addClass（“隐藏”）；
jQuery（“事实2”）.addClass（“隐藏”）；
jQuery（“事实1”）.addClass（“隐藏”）；
jQuery（“事实4”）.addClass（“隐藏”）；
jQuery（“#fact5”）.addClass（“隐藏”）；
jQuery（“事实6”）.addClass（“隐藏”）；
});
jQuery（“.facts-button4”）。单击（函数（）{
jQuery（'#fact img'）.attr（'src'，'img/backgrounds/fact4 img.png'）；
jQuery（“事实4”）.removeClass（“隐藏”）；
jQuery（“事实标准”）.addClass（“隐藏”）；
jQuery（“事实2”）.addClass（“隐藏”）；
jQuery（“事实3”）.addClass（“隐藏”）；
jQuery（“事实1”）.addClass（“隐藏”）；
jQuery（“#fact5”）.addClass（“隐藏”）；
jQuery（“事实6”）.addClass（“隐藏”）；
});
jQuery（“.facts-button5”）。单击（函数（）{
jQuery（'#fact img'）.attr（'src'，'/img/backgrounds/fact5 img.png'）；
jQuery（“事实5”）.removeClass（“隐藏”）；
jQuery（“事实标准”）.addClass（“隐藏”）；
jQuery（“事实2”）.addClass（“隐藏”）；
jQuery（“事实3”）.addClass（“隐藏”）；
jQuery（“事实4”）.addClass（“隐藏”）；
jQuery（“事实1”）.addClass（“隐藏”）；
jQuery（“事实6”）.addClass（“隐藏”）；
});
jQuery（“.facts-button6”）。单击（函数（）{
jQuery（'#fact img'）.attr（'src'，'/img/backgrounds/fact6 img.png'）；
jQuery（“事实6”）.removeClass（“隐藏”）；
jQuery（“事实标准”）.addClass（“隐藏”）；
jQuery（“事实2”）.addClass（“隐藏”）；
jQuery（“事实3”）.addClass（“隐藏”）；
jQuery（“事实4”）.addClass（“隐藏”）；
jQuery（“#fact5”）.addClass（“隐藏”）；
jQuery（“事实1”）.addClass（“隐藏”）；
});

---

我们想做的是让它成为一个定时事件。因此，事实每5秒改变一次，但仍然具有现在的点击功能。有人知道这样做的方法吗？

使用setInterval功能每5秒启动一次点击

var i=1;
setInterval(function(){ 
jQuery(".facts-button"+i).click();
i++;
if(i==7)
 i=1; 
}, 5000);

试试这个

var arrId=["#fact1","#fact2","#fact3","#fact4"];// you can add more
var arrImg=["fact1-img.png","fact2-img.png","fact3-img.png","fact4-img.png"];

var counter=0;
var currentFact=1;// for selected fact id;
// set interval to do the task for above array variables
setInterval(function(){
    if(counter == arrId.length){
        counter =0; // reinit counter
    }
    jQuery("#fact-standaard").addClass("hide");
    for(var i=0,l=arrId.length;i<l;i++){
        if(currentFact==i){
            // for current fact, remove hide class and add image for it
            jQuery('#fact-img').attr('src', '/img/backgrounds/'+arrImg[i]);
            jQuery(arrId[i]).removeClass("hide");// remove the current facet id
        } else {
            jQuery(arrId[i]).addClass("hide");
        }
    }
    counter++;
},5000); // for five seconds delay

---

您的代码中存在着非常高的冗余级别-您可能希望从一开始就着手解决这个问题。谢谢，我使用了您代码的一部分来缩短代码的长度。@Sjoerd所以您不打算重构您的意大利面代码？是的，我使用了下面答案的一部分来简化代码。

jQuery(".facts-button2").click(function(){
   jQuery('#fact-img').attr('src', '/img/backgrounds/fact2-img.png');
    jQuery("#fact2").removeClass("hide");
    jQuery("#fact-standaard,#fact1,#fact3,#fact4,#fact5,#fact6").addClass("hide");
});