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());
});

点击延迟时从一个div到另一个div的内容

1 个答案: