通过onClick循环遍历具有相同类的DIV [英] onClick cycle through DIVs with same class

问题描述

我正在尝试创建一个脚本来循环遍历具有相同类名的DIV(一次). .nextAll()和所有有趣的东西对我来说完全是陌生的.如何使它起作用?

I'm trying to create a script to cycle through DIVs (one at a time) that have the same class name. .nextAll() and all that fun stuff is completely foreign to me. How can I get this to function?

这是它应该如何工作的.单击右侧的浅灰色框时，它应显示下一个.hint及其hint-description.一次仅显示一个提示.这应该是一个无限循环.意思是，在第三个提示之后，它应该只是从顶部开始.希望jsfiddle有意义.请让我知道是否可以！

Here's how it should work. When you click the light grey box on the right, it should show the next .hint along with it's hint-description. Only showing one hint at a time. This should be an infinite loop. Meaning, after the 3rd hint, it should just start at the top again. Hopefully the jsfiddle makes sense. Please let me know if it doesn't!

http://jsfiddle.net/DzD5W/1/

推荐答案

这是一种实现方法:

(function(){

    var $hints = $('.hint');
    var $hintDescriptions = $('.hint-description');
    var i = 0;

    $('.next-hint').on('click', function(){
        i = (i + 1) % $hints.length;
        $hints.hide().eq(i).show();
        $hintDescriptions.hide().eq(i).show();
    });

})();

更新了JSFiddle

这篇关于通过onClick循环遍历具有相同类的DIV的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！