内容从一个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()); 
});