JQuery的：事件的順序和遍歷DOM

Question

我嘗試以下方法：

一個用於鏈接ul，另一個用於幻燈片

<ul class="infoslider"> 
     <li><a data-orbit-link="slidegroup1" href="#">Slides1</a></li> 
     <li><a data-orbit-link="slidegroup2" href="#">Slides2</a></li> 
    </ul> 

<ul id="infoslider"> 
    <li class=""  data-orbit-slide="slidegroup1"> <img src="img1.png" ></li> 
    <li class="active" data-orbit-slide="">    <img src="img2.png" ></li> 
    <li class=""  data-orbit-slide="slidegroup2"> <img src="img3.png" ></li> 
    <li class=""  data-orbit-slide="">    <img src="img4.png" ></li> 
</ul> 

本場單擊「下一步」

<a class="orbit-next" href="#">Next</a> 

我點擊「orbit-next」轉發幻燈片。

使用JQuery我檢查#infoslider li data-orbit-slide-屬性。如果它是空的，它會遍歷到它找到一個字符串。 然後它添加相應的ul.infoslide li活動類。

$j("a.orbit-next").click(function() { 

    //select the active li 
    var test = $j("#infoslider > li.active"); 

    //test, if there is a string in "data-orbit-slide" 
    if (test.attr("data-orbit-slide").length > 0) {  
     var link = test.attr("data-orbit-slide"); 
     } else {   
     //if not, get the elements 
     var term1 = document.getElementById('infoslider'); 
     //and traverse up until a string is found 
     var link = $j("#infoslider li.active").prevUntil(term1,"li[data-orbit-slide!='']").attr("data-orbit-slide");   
     }  

     //select the coresponding a in div.infoslider 
     var target = $j("a[data-orbit-link='" + link + "']").parent(); 

     //remove the classes active 
     $j("div.infoslider > ul > li").removeClass("active"); 
     //add the active class 
     target.addClass("active"); 
}); 

這工作得很好。 但：

1. ul.infoslider李總是「一個落後」。即當幻燈片img3.png出現時，活動類仍在「slidegroup1」上。直到「img4.png」出現「slidegroup2」纔會獲得主動類。爲什麼？ 它與JQuery/Orbit-Slider /我的JQuery執行的事件順序有關嗎？
2. 有沒有更簡單的方法來實現我想要的？

在此先感謝您的幫助。

Answer 1

請嘗試以下操作，您的代碼應該正常工作。

target.next().addClass("active"); 

作爲替代實現，您可以使用Jquery data（）實用程序來存儲活動幻燈片信息。這樣可以避免列表遍歷。我做了一些優化，以避免多個DOM遍歷。

這是代碼片段。

$(function() { 
    //select the active li 
    var $activeSlide = $("#infoslider > li.active"); 
    $("a.orbit-next").click(function() { 
     if (!$activeSlide.length) { return; } 
     var $nextSlide = $activeSlide.next(); 
     if (!$nextSlide.length) { return; } 

     var slideGroup; 
     //test, if there is a string in "data-orbit-slide" 
     if ($nextSlide.attr("data-orbit-slide").length > 0) { 
      slideGroup = $nextSlide.attr("data-orbit-slide"); 
      $(this).data("slideGroup", slideGroup); 
     } else { 
      slideGroup = $(this).data("slideGroup"); 
     } 

     //remove the classes active 
     $("ul.infoslider > li").removeClass('active'); 
     //select the coresponding a in div.infoslider 
     $("a[data-orbit-link='" + slideGroup + "']").parent().addClass("active"); 
     $activeSlide.removeClass("active"); 
     $nextSlide.addClass("active"); 
     $activeSlide = $nextSlide; 
    }); 
}) 

Answer 2

以下是結果：

//select the active li 
var activeSlide = $j("#infoslider > li.active"); 
//populate with data, otherwise at the first click there is no data 
slideStart = activeSlide.attr("data-orbit-slide"); 

$j("a.orbit-next").click(function() { 

    //check if second-last-child, cause the slider is looping 
    //2nd-child, 2nd-last, cause Orbit is cloning the first and the last slide 
    if (activeSlide.is(":nth-last-child(2)")) { 
     var nextSlide = $j("#infoslider > li:nth-child(2)"); 
    } else { 
     var nextSlide = activeSlide.next(); 
    } 

    var slideGroup; 
    //test, if there is a string in "data-orbit-slide" 
    //not very elegant, but had no idea how to initiate the var slideGroup... 
    if (nextSlide.attr("data-orbit-slide").length == 0 && slideStart.length > 0) { 
     slideGroup = slideStart; 
     slideStart = ""; 
    } else if(nextSlide.attr("data-orbit-slide").length > 0 && slideStart == ""){ 
     slideGroup = nextSlide.attr("data-orbit-slide"); 
     $(this).data("slideGroup", slideGroup); 
    } else { 
     slideGroup = $(this).data("slideGroup"); 
    } 


    //remove the classes active 
    $j("div.infoslider > ul > li").removeClass('active'); 
    //select the coresponding a in div.infoslider 
    $j("a[data-orbit-link='" + slideGroup + "']").parent().addClass("active"); 
    activeSlide = nextSlide; 
});