內容從一個div到另一個點擊延遲

Question

我寫了一個簡單的函數，它從一個div獲取內容，並在指定的元素被點擊時將其放入另一個div。我爲我的滑塊中的圖像標題做了它。因此，當您點擊作爲定位點的箭頭時，將分配給「有效」幻燈片的div'orbit-caption'的內容放到另一個'image-caption'中。

<ul class="projects-slider" data-orbit> 
    <li> 
    <img src="img/projects/1.jpg" alt="slide 1" /> 
    <div class="orbit-caption"> 
    Text 1 
    </div> 
    </li> 
    <li> 
    <img src="img/projects/2.jpg" alt="slide 2" /> 
    <div class="orbit-caption"> 
    Text 2 
    </div> 
    </li> 
    <li> 
    <img src="img/projects/3.jpg" alt="slide 3" /> 
    <div class="orbit-caption"> 
    Text 3 
    </div> 
    </li> 
    <li> 
    <img src="img/projects/4.jpg" alt="slide 4" /> 
    <div class="orbit-caption"> 
    Text 4 
    </div> 
    </li> 
    <li> 
    <img src="img/projects/5.jpg" alt="slide 5" /> 
    <div class="orbit-caption"> 
    Text 5 
    </div> 
    </li> 
</ul> 
<a href="#" class="orbit-prev"><span></span></a> 
<a href="#" class="orbit-next"><span></span></a> 

<footer><div class="img-caption"></div></footer> 

<script> 
$(document).ready(function() { 

var caption = $('li.active .orbit-caption').html(); 
$('.img-caption').text(caption); 

$('.orbit-container a').click(function() { 

var caption = $('li.active .orbit-caption').html(); 
$('.img-caption').text(caption); 

}); 


}); 
</script> 

問題是點擊被延遲，我的意思是，當我點擊一次，我的圖像得到了前一個的描述。有人可以幫助我解決這個問題，並展示如何簡化我的功能？

Answer 1

是你想要的嗎？

http://jsfiddle.net/OxyDesign/5o3aa225/

JS

$(document).ready(function() { 
    $('.img-caption').text($('li.active .orbit-caption').html()); 

    $('.orbit-next,.orbit-prev').click(function() { 
     var currentLi = $('li.active'), 
      newLi = $(this).hasClass('orbit-next') ? currentLi.next() : currentLi.prev(); 

     if(newLi.length){ 
      currentLi.removeClass('active'); 
      newLi.addClass('active'); 
      $('.img-caption').text(newLi.find('.orbit-caption').html()); 
     } 
    }); 
}); 

您還可以使用軌道滑塊（Orbit Doc）的設置並添加你的函數作爲回調（after_slide_change）：

$(document).foundation({ 
    orbit: { 
    animation: 'slide', 
    timer_speed: 1000, 
    pause_on_hover: false, 
    animation_speed: 500, 
    navigation_arrows: true, 
    timer: false, 
    bullets: false, 
    slide_number: false, 
    slide_number_text: 'of', 
    swipe: true, 
    variable_height: 'auto', 
    after_slide_change : function(){ 
     $('.img-caption').text($('li.active').find('.orbit-caption').html()); 
    } 
    } 
}); 

或者你可以使用事件after-slide-change.fndtn.orbit（Orbit Doc）

$('[data-orbit]').on("after-slide-change.fndtn.orbit", function(event, orbit) { 
    $('.img-caption').text($('li.active').find('.orbit-caption').html()); 
}); 

或者

$('[data-orbit]').on("after-slide-change.fndtn.orbit", function(event, orbit) { 
    $('.img-caption').text($('.orbit-caption').eq(orbit.slide_number).html()); 
});