Cách thực hiện trong câu lệnh for, "i" để bắt đầu từ một giá trị cho đến khi chu kỳ kết thúc và chu kỳ thứ hai bắt đầu từ 1

Question

Tôi có một chút phức tạp hơn một chút. Tôi có năm li và một lớp "hoạt động".

Chỉ một trong những người trong số họ có lớp "hoạt động". Cái đó sẽ có màu đỏ.

Khi tôi nhấp vào liên kết "Tiếp theo", lớp "hoạt động" sẽ được thêm vào li tiếp theo.

Khi tôi nhấp vào liên kết "Trước", lớp "hoạt động" sẽ được thêm vào li trước đó.

Khi tôi nhấp vào một li, lớp "hoạt động" sẽ chỉ được thêm vào li được nhấp.

Những suy nghĩ đó hoạt động, nhưng có sự cố với hàm loop().

Tôi cần lớp "hoạt động" để chuyển tự động từ một li sang li kế tiếp theo. Nó hoạt động, nhưng mọi thứ đang phát điên khi tôi nhấp vào liên kết tiếp theo, liên kết trước hoặc li.

Tất cả 3 yếu tố đó: vòng lặp, liên kết tiếp theo và nhấp vào li sẽ hoạt động hoàn hảo cùng nhau.

Nếu tôi nhấp vào liên kết tiếp theo và lớp "đang hoạt động" được chuyển từ li thứ hai sang li thứ ba, tôi cần báo cáo "for" để tiếp tục từ li thứ ba để di chuyển lớp và tiếp tục chu kỳ .

Tôi có thể cố gắng lấy "i" đó cho từ nr-1 (li được nhấp vào) không phải từ 0, cho (var i = nr-1; i < functions.length; i ++), nhưng sau chu kỳ đầu tiên của lớp "hoạt động" nó sẽ bắt đầu từ 0 một lần nữa, nhưng nó bắt đầu từ nr-1, đó là bình thường.

Vòng lặp hoạt động, sự cố xuất hiện khi tôi nhấp vào liên kết li hoặc liên kết trước đó.

$(document).ready(function() { 
 

 
    var f1 = function() { 
 
    $(".1").addClass("active").siblings("li").removeClass("active") 
 
    }; 
 
    f2 = function() { 
 
    $(".2").addClass("active").siblings("li").removeClass("active") 
 
    }; 
 
    f3 = function() { 
 
    $(".3").addClass("active").siblings("li").removeClass("active") 
 
    }; 
 
    f4 = function() { 
 
    $(".4").addClass("active").siblings("li").removeClass("active") 
 
    }; 
 
    f5 = function() { 
 
    $(".5").addClass("active").siblings("li").removeClass("active") 
 
    }; 
 

 
    var functions = [f1, f2, f3, f4, f5]; 
 
    var y = functions.length; 
 

 
    var loop = function() { 
 
    for (var i = 0; i < functions.length; i++) { 
 
     (function (i) { 
 
     setTimeout(function() { 
 
      functions[i](); 
 
     }, 1000 * i); 
 
     })(i); 
 
    } 
 
    setTimeout(loop, (1000 * (functions.length))); 
 
    } 
 
    
 
    loop(); 
 

 
    $("ol li ").click(function() { 
 
    var nr = $(this).data("number"); 
 
    functions[nr - 1](); 
 
    }); 
 

 

 
    $(".flex-next").click(function() { 
 
    var nr = $("ol").find("li.active").data("number"); 
 

 
    if (nr == y) { 
 
     functions[0](); 
 
    } else { 
 
     functions[nr](); 
 
    } 
 

 
    }); 
 

 

 
    $(".flex-prev").click(function() { 
 
    var nr = $("ol").find("li.active").data("number"); 
 
    //y = functions.length; 
 
    if (nr == 1) { 
 
     functions[y - 1](); 
 
    } else { 
 
     functions[nr - 2](); 
 
    } 
 

 
    }); 
 

 
});

@import url(http://reset5.googlecode.com/hg/reset.min.css); 
 
ol li { 
 
    width:50px; 
 
    height:50px; 
 
    background-color:blue; 
 
    float:left; 
 
    margin:10px; 
 
} 
 
ul li a { 
 
    text-decoration: none; 
 
    width:100px; 
 
} 
 
.active { 
 
    background-color:red; 
 
}

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<ol> 
 
    <li data-number="1" class="1 active "> 
 
    <a href="#"></a> \t 
 
    </li> 
 
    <li data-number="2" class="2"> 
 
    <a href="#"></a> 
 
    </li> 
 
    <li data-number="3" class="3"> 
 
    <a href="#"></a> 
 
    </li> 
 
    <li data-number="4" class="4"> 
 
    <a href="#"></a> 
 
    </li> 
 
    <li data-number="5" class="5"> 
 
    <a href="#"></a> 
 
    </li> 
 
</ol> 
 
<ul class="flex-direction-nav"> 
 
    <li> 
 
    <a class="flex-prev" href="javascript:void(0);">Previous</a> 
 
    </li> 
 
    <li> 
 
    <a class="flex-next" href="javascript:void(0);">Next</a> 
 
    </li> 
 
</ul>

jsfiddle here

Answer 1

Đã sửa đổi loop() một chút.

$(document).ready(function() { 
 

 
    var f1 = function() { 
 
    $(".1").addClass("active").siblings("li").removeClass("active") 
 
    }; 
 
    f2 = function() { 
 
    $(".2").addClass("active").siblings("li").removeClass("active") 
 
    }; 
 
    f3 = function() { 
 
    $(".3").addClass("active").siblings("li").removeClass("active") 
 
    }; 
 
    f4 = function() { 
 
    $(".4").addClass("active").siblings("li").removeClass("active") 
 
    }; 
 
    f5 = function() { 
 
    $(".5").addClass("active").siblings("li").removeClass("active") 
 
    }; 
 

 
    var functions = [f1, f2, f3, f4, f5]; 
 
    var y = functions.length; 
 
    var myInterval = null; 
 
    var loop = function (goToFirst) { 
 
    if(goToFirst == true) 
 
     f1(); 
 
    myInterval = setInterval(function(){ 
 
     $(".flex-next").click(); 
 
    },1000); 
 
    } 
 
    
 
    loop(true); 
 

 
    $("ol li ").click(function() { 
 
    var nr = $(this).data("number"); 
 
    functions[nr - 1](); 
 
    }); 
 

 

 
    $(".flex-next").click(function() { 
 
    var nr = $("ol").find("li.active").data("number"); 
 
    clearInterval(myInterval); 
 
    if (nr == y) { 
 
     functions[0](); 
 
    } else { 
 
     functions[nr](); 
 
    } 
 
    loop(false); 
 
    }); 
 

 

 
    $(".flex-prev").click(function() { 
 
    var nr = $("ol").find("li.active").data("number"); 
 
    clearInterval(myInterval); 
 
    if (nr == 1) { 
 
     functions[y - 1](); 
 
    } else { 
 
     functions[nr - 2](); 
 
    } 
 
    loop(false); 
 
    }); 
 

 
});

@import url(http://reset5.googlecode.com/hg/reset.min.css); 
 
ol li { 
 
    width:50px; 
 
    height:50px; 
 
    background-color:blue; 
 
    float:left; 
 
    margin:10px; 
 
} 
 
ul li a { 
 
    text-decoration: none; 
 
    width:100px; 
 
} 
 
.active { 
 
    background-color:red; 
 
}

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<ol> 
 
    <li data-number="1" class="1 active "> 
 
    <a href="#"></a> \t 
 
    </li> 
 
    <li data-number="2" class="2"> 
 
    <a href="#"></a> 
 
    </li> 
 
    <li data-number="3" class="3"> 
 
    <a href="#"></a> 
 
    </li> 
 
    <li data-number="4" class="4"> 
 
    <a href="#"></a> 
 
    </li> 
 
    <li data-number="5" class="5"> 
 
    <a href="#"></a> 
 
    </li> 
 
</ol> 
 
<ul class="flex-direction-nav"> 
 
    <li> 
 
    <a class="flex-prev" href="javascript:void(0);">Previous</a> 
 
    </li> 
 
    <li> 
 
    <a class="flex-next" href="javascript:void(0);">Next</a> 
 
    </li> 
 
</ul>

Answer 2

Như bạn thừa nhận, cho vòng dường như không phù hợp với công việc. Thay vào đó, chúng ta hãy chỉ làm cho vòng lặp riêng của chúng tôi mà không là tùy thuộc vào một i

var interval= 5000; 

function navLoop() { 

    (function loopCheck() { 

     var $thisLi = $(".myList").find(".active") 

     if($thisLi.next('li').length) { //check to see if "this" isn't the last element 
      $thisLi.removeClass("active") 
      $thisLi.next('li').addClass("active"); 

     } else { //If "this" is last element, just remove class "active" and add it to the first li 
      $(".myList li").removeClass("active") 
      $(".myList li").first().addClass("active") 
     } 


     setTimeout(loopCheck, interval) 

    }()); 

} 

Bây giờ bạn không cần phải có chức năng cho mỗi phần tử danh sách cá nhân, chỉ cần gọi navLoop() một lần và để cho nó làm việc trên riêng của mình. navLoop() không quan tâm yếu tố nào hiện đang "hoạt động" theo lựa chọn của người dùng, nó sẽ cố gắng giữ vòng lặp đi từ nơi phần tử "hiện hoạt" hiện tại.

Answer 3

Tôi đã thay đổi js của bạn:

$(document).ready(function(){ 

    var parent = $('ol'), 
     items = parent.find('li'), 
     itemsLength = items.length, 
     currentTime; 
    var navItem = function(way){ 
     var nextItem, currentItem; 
     items.each(function(i){ 
      if($(this).hasClass('active')){ 
       currentItem = $(this); 
       if(way == 'next') 
       nextItem = (i+1==itemsLength) ? $(items[0]) : $(items[i+1]); 
       else nextItem = (i==0) ? $(items[itemsLength-1]) : $(items[i-1]); 
      } 
     }); 
     currentItem.removeClass('active'); 
     nextItem.addClass("active").siblings("li"); 
     currentTime = setTimeout(function(){navItem('next')}, 1000); 
    } 
    navItem('next'); 
    $('.flex-prev').click(function(){ 
     clearTimeout(currentTime); 
     navItem('prev'); 
    }); 

    $('.flex-next').click(function(){ 
     clearTimeout(currentTime); 
     navItem('next'); 
    }); 
    items.click(function(){ 
     clearTimeout(currentTime); 
     var newCurrent = $(this).prev('li') 
     items.removeClass('active'); 
     if(newCurrent.length != 0) 
     $(this).prev('li').addClass("active").siblings("li"); 
     else 
     $(items[itemsLength-1]).addClass("active").siblings("li"); 
     navItem('next'); 
    }); 

}); 

Bạn có thể kiểm tra xem nó trong jsfiddle

Answer 4

HTML

<ul> 
<li>1</li> 
<li>2</li> 
<li>3</li> 
<li>4</li> 
<li>5</li> 
</ul> 
<div id="next">NEXT</div> 
<div id="prev">PREV</div> 

JS

addActive = function(){ 
    $('.active').removeClass('active'); 
    $(this).addClass('active'); 
} 

loop = function(){ 
    var li = $('.active'); 
    $('.active').removeClass('active'); 
    if($(li).next().length == 0){ 
     $(" li:first-child ").addClass('active'); 
    } 
    else 
    $(li).next().addClass('active'); 
} 

nextClick = function(){ 
    var li = $('.active'); 
    $('.active').removeClass('active'); 
    if($(li).next().length == 0){ 
     $(" li:first-child ").addClass('active'); 
    } 
    else 
    $(li).next().addClass('active'); 
} 

prevClick = function(){ 
    var li = $('.active'); 
    $('.active').removeClass('active'); 
    if($(li).prev().length == 0){ 
     $(" li:last-child ").addClass('active'); 
    } 
    else 
    $(li).prev().addClass('active'); 
} 
$(document).ready(function(){ 
    //LOOP 
    setInterval(loop, 2000); 
    //LI CLICK 
    $('li').click(addActive); 
    //NEXT CLICK 
    $('#next').click(nextClick); 
    //PREV CLICK 
    $('#prev').click(prevClick); 
}); 

Chỉ cần sử dụng này, nó sẽ làm việc tốt

Answer 5

Tôi nghĩ rằng nếu bạn đơn giản hóa một chút mã ban đầu của bạn, sau đó mọi việc sẽ dễ dàng hơn. Về cơ bản bạn muốn tự động hóa chuỗi "tiếp theo". Nó có nghĩa là với tôi rằng bạn phải cải thiện phần đó như là điều đầu tiên.

tôi refactored mã của bạn như sau:

$(function(){ 

    // we move the logic of `next` and `prev` in separate, 
    // stand alone, functions in order to be reusable. 
    function next() { 
    // we remove the `active` class from the active element, 
    // and we're searching for the next one 
    var li = $("ol li.active").removeClass("active").next("li"); 

    // adding `active` class to the next one, or to the `first` in case 
    // there is no next element. 
    (li.length ? li : $("ol li").first()).addClass("active"); 
    } 

    function prev() { 
    // we remove the `active` class from the active element, 
    // and we're searching for the previous one 
    var li = $("ol li.active").removeClass("active").prev("li"); 

    // adding `active` class to the previous one, or to the `first` 
    // in case there is no previous element 
    (li.length ? li : $("ol li").last()).addClass("active"); 
    } 

    // Here we add the logic when we click on `li` elements. 
    $("ol").on("click", "li", function(){ 
    $(this).addClass("active").siblings().removeClass("active"); 
    }); 

    // We bound the `next` and `previous` functions to the links 
    $(".flex-next").click(next); 
    $(".flex-prev").click(prev); 

    // At this point, we can easily call both `next` and `prev` functions 
    // also from intervals or timeouts 
    setInterval(next, 1000); 
}); 

này đang làm việc vì cả hai next và prev chức năng không phụ thuộc bởi bất cứ điều gì khác hơn DOM chính nó. Vì vậy, để hiểu phần tử "hoạt động" là gì, nó tìm kiếm phần tử với lớp active: nó không thực sự quan trọng cái nào là nó, nếu nó được di chuyển bằng cách nhấn vào người dùng, hoặc cái gì khác. Cả hai hàm đều nhận được phần tử hoạt động hiện tại và di chuyển lớp đến phần tử kế tiếp/trước đó - nếu có thể, nếu không thì sẽ là phần tử đầu tiên/cuối cùng.

Bạn cũng có thể sử dụng thời gian chờ, thay vì khoảng thời gian và điều chỉnh thời gian của lần lặp tiếp theo dựa trên nhấp chuột của người dùng - hoặc hủy nó.

Hy vọng điều đó sẽ hữu ích.