jquery這個元素從裏面如果

Question

我想要做的是簡單的jquery嚮導，我有4個步驟，按鈕上一個和下一個。根據你所在的步驟，當你點擊下一行時，行應該用金色填充，然後在此之後填寫圓圈。因此，如果你在步驟2上，點擊下一步，你將填寫從圓圈2到圓圈的行3.依此類推......我設法用5個函數來做到這一點，每個元素都有一個函數，但我相信它可以用一個簡單的函數完成。下面是代碼：

$(document).ready(function() { 
    $('.next').click(function() { 
     if ($('.sirina').parent().prev('.krug').hasClass('stiglo')) { 
      console.log(this); 
      $('.sirina').animate({ 
       width: '150px' 
      }, 1000, function() { 
       $(this).parent().next('.krug').animate({ 
        borderTopColor: '#E3B009', 
        borderBottomColor: '#E3B009', 
        borderLeftColor: '#E3B009', 
        borderRightColor: '#E3B009' 
       }, 1000).addClass('stiglo'); 
      }); 
     } 
    }); 
}); 

http://jsfiddle.net/Frenki/LbssU/3/

現在，問題是在CONSOLE.LOG線後我的動畫中的所有「.sirina」類，而不是一個衛生組織以前div有類‘stiglo’，這是內部函數'if'中的元素。但如果我使用'this'，那麼它將引用'next'類而不是函數內部的那個。

我希望這一切纔有意義:)

Answer 1

你的問題是，你正在使用.sirina動畫。這將觸發所有元素進行動畫。在這裏，你的if條件沒有任何意義，因爲你正在使用.sirina進行動畫製作。現在，我的回答

$(document).ready(function() { 
    $('.next').click(function() { 
     $('.stiglo').nextAll('.prvi:first').find('.sirina').animate({ 
       width: '150px' 
      }, 1000, function() { 

       $(this).parent().prev('.krug').removeClass('stiglo'); 

       $(this).parent().next('.krug').animate({ 
        borderTopColor: '#E3B009', 
        borderBottomColor: '#E3B009', 
        borderLeftColor: '#E3B009', 
        borderRightColor: '#E3B009' 
       }, 1000).addClass('stiglo'); 
      }); 

JSFIDDLE

Answer 2

這個回調內部的範圍是指該元素的animate()的執行上：

 $('.sirina').animate({ 
      width: '150px' 
     }, 1000, function() { 
      // $(this) is $('.sirina') element the callback is executed on 
      $(this).parent().next('.krug').animate({ 
       borderTopColor: '#E3B009', 
       borderBottomColor: '#E3B009', 
       borderLeftColor: '#E3B009', 
       borderRightColor: '#E3B009' 
      }, 1000).addClass('stiglo'); 
     }); 

內單擊處理範圍的元素click()附加到，在這種情況下$('.next')。您可以使用closure來在animate()回調中使用此上下文。

$(document).ready(function() { 
    $('.next').click(function() { 
     var self = this; 
     if ($('.sirina').parent().prev('.krug').hasClass('stiglo')) { 
      console.log(this); 
      $('.sirina').animate({ 
       width: '150px' 
      }, 1000, function() { 
       // self is $('.next')[0] 
       $(self).parent().next('.krug').animate({ 
        borderTopColor: '#E3B009', 
        borderBottomColor: '#E3B009', 
        borderLeftColor: '#E3B009', 
        borderRightColor: '#E3B009' 
       }, 1000).addClass('stiglo'); 
      }); 
     } 
    }); 
}); 

Answer 3

設置元素的當前索引，查找

DEMO VIEW

var current=0; 

    $(document).ready(function() { 
    $('.next').click(function() { 
     if ($('.sirina').parent().prev('.krug').hasClass('stiglo')) { 
      console.log(this); 
      $('.sirina').eq(current).animate({ 
       width: '150px' 
      }, 1000, function() { 
       current++; 
       $('.krug').eq(current).animate({ 
        borderTopColor: '#E3B009', 
        borderBottomColor: '#E3B009', 
        borderLeftColor: '#E3B009', 
        borderRightColor: '#E3B009' 
       }, 1000).addClass('stiglo'); 
      }); 
     } 
    }); 
});