Question

我这里有一个有效的HTML代码：

<div class="monitoring-icons">
    <div class="mon-img hovicon effect-1 sub-a mon-active">
    <img class="icon-active" src="http://placehold.it/125X125&text=Blood" width="100px" data-info="blood">
    </div>

    <div class="mon-img hovicon effect-1 sub-a">
    <img class="icon-inactive" src="http://placehold.it/125X125&text=Weight" width="100px" data-info="weight">
    </div>

    <div class="mon-img hovicon effect-1 sub-a">
    <img class="icon-inactive" src="http://placehold.it/125X125&text=Sleep" width="100px" data-info="sleep">
    </div>
</div>

<div class="monitoring-infor">

<div class="icon-item" id="info-blood">
<h2 class="smaller">Blood Pressure</h2>
<p>Etiam sed velit hendrerit, facilisis est sit amet, facilisis orci. Vestibulum et risus condimentum, tristique purus sit amet, placerat sem. Ut blandit lorem id sem iaculis, et consequat lorem vestibulum. </p>
</div>

<div class="icon-item monitoring-info-item" id="info-weight">
<h2 class="smaller">Weight </h2>
<p>Cras malesuada lacinia libero a maximus. Cras ullamcorper tellus in ante laoreet eleifend. Donec tincidunt libero nec tellus placerat pretium.</p>
</div>


<div class="icon-item monitoring-info-item" id="info-sleep">
<h2 class="smaller">Sleep </h2>
<p>Fusce nunc arcu, ultrices vel odio at, vulputate pulvinar nunc. Sed placerat, lorem ac consequat lobortis, turpis lacus interdum nibh, vel ultricies urna felis vel neque. Nunc pharetra laoreet ante, eu pulvinar est. Nullam sollicitudin ultricies enim at aliquet. Nulla pharetra nulla in sem viverra consectetur. Fusce quis turpis tristique, hendrerit neque ut, facilisis eros.</p>
</div>

</div>

现在，我要做的是转到下一个mon-img并添加mon-active，我在这里有一个成功的jquery：

setInterval(function(){                
        $('.mon-active').removeClass(function(){
            $(this).next().addClass('mon-active');
            return 'mon-active';
            $(this+'img').trigger('click');
        }); 
    }, 10000);

它的工作但我想要的是循环它。当它是最后一个mon-img时，我希望它将css mon-active添加到第一个mon-img。

此外，同时我想触发click事件，以便显示图像按钮的相关信息。

这里是my complete code in fiddle。

Answer 1

我指的是你小提琴中给出的整个代码。有一些要点需要注意，这将简化代码。

1）类mon-active的切换是在图像的点击处理程序内完成的。没有必要在间隔中再次执行此操作：每次触发单击时，类切换都会自动完成。

2）不要多次创建具有相同选择器的jQuery对象。编写它需要花费很多时间来执行它。创建一次，将其存储在变量中并通过var名称引用它。

3）如果您对同一个对象执行多项操作，请使用链接操作。

所以你的代码可能如下所示：

jQuery(function($) {

var timer = myInterval(), // EDIT
    delay;

// variables for often used jQuery objects:
var imgs = $('.monitoring-icons img'),
    mons = $('.mon-img'),
    info = $('.monitoring-infor div.icon-item');
// no need for '.each()', jQuery's '.on()' does the 'each' internally
imgs.on("click", function(ev, i){

    var ths = $(this), // 'this' refers to the clicked image
        par = ths.parent(), // get the parent div of the clicked image
        infoid = '#info-' + ths.data('info'), // get the associated id from data
        infoshow = $(infoid); // get the associated info-element with that id

    par.addClass('mon-active'); // make parent-div of clicked image active
    // use '.not()' to select all the other mon-divs that are not this parent
    mons.not(par).removeClass('mon-active'); // make all others inactive

    // here use chaining of two actions 'removeClass()' and 'addClass()'
    ths.removeClass('icon-inactive').addClass('icon-active'); // make clicked img active
    // '.not()' selects all imgs that are not this clicked image
    imgs.not(this).removeClass('icon-active').addClass('icon-inactive'); // make them inactive

    // do the same with the associated info-text-divs
    infoshow.removeClass('monitoring-info-item').addClass('mon-info');
    info.not(infoshow).removeClass('mon-info').addClass('monitoring-info-item');

    clearInterval(timer); clearTimeout(delay); // EDIT
    delay = setTimeout(function() {timer = myInterval();}, 20000); // EDIT

});

function myInterval() { // EDIT
    return setInterval(function(){ //EDIT: return added           
        var act = $('.mon-active'), // get the active div
            // get the index of active div and add one to have index of the next
            // with 'modulo' we get '0' when active is the last one, so we start from beginning
            i = (mons.index(act) + 1) % mons.length;
        // trigger the next image, all needed actions are done in the click-handler above
        imgs.eq(i).trigger('click');
    }, 10000);
} // EDIT

});

我希望DEMO能做你想要的一切，否则请发表评论。

编辑根据您的上一个问题：1）定义变量以保持代码顶部的间隔和延迟。 2）在函数myInterval()中包装setInterval，返回此间隔。 3）在点击处理程序中添加一些用clearInterval()停止间隔的代码，用setTimeout()设置20000ms的延迟，然后通过调用myInterval()再次启动间隔。我已添加上面的代码，并使用// EDIT标记。

jQuery setInterval用于下一个元素

1 个答案: