Question

我正在使用Foundation 3构建一个网站，并使用它附带的orbit slider。问题是我的网站设计要求我将滑块导航移动到与幻灯片允许的位置不同的位置。

我的源代码是：

<div id="slide-wrapper">
  <div class="orbit-wrapper" style="width: 1384px; height: 560px;"><div class="slider orbit" style="width: 1384px; height: 560px;">
      <img src="http://domain.com/uploads/sliders/psd1400x558.jpg" alt="slide image" data-caption="#captionId1" class="orbit-slide" style="opacity: 1; z-index: 3; display: block;">
      <img src="http://domain.com/uploads/sliders/banner1.jpg" alt="slide image" data-caption="#captionId2" class="orbit-slide" style="opacity: 0; display: block;">
  </div>
  <div class="slider-nav hide-for-small">
      <span class="right">Right</span>
      <span class="left">Left</span>
  </div>
</div><!--slider-->

<div class="blue-wrapper">
    <div class="left-blue"></div>
    <div class="right-blue"></div>
</div>


<span class="orbit-caption" id="captionId1">
   <h3>Title one</h3>
   <p>Text copy text copy text copy </p>
</span>

<span class="orbit-caption" id="captionId2">
   <h3>Title the Second</h3>
   <p>text copy text copy text copy</p>
</span>

我需要在每个span.orbit-caption中移动div.slider-nav，但是我尝试的并没有按预期工作。

我目前的jQuery是：

// Move home slider navigation from .slider to .orbit-caption
$(document).ready(function() {
     $('div.slider-nav').detach().appendTo('span.orbit-caption');
});

请告知。

Answer 1

试试这个：

var slider = $('div.slider-nav');
$('span.orbit-caption').each(function(){
   $(this).append(slider.clone());
});

slider.remove();

Answer 2

查看orbit.js source的相关位，触发next / prev幻灯片的事件处理程序使用$slides_container上的委托事件（即滑块包装元素）绑定，然后过滤冒泡的事件通过next / prev html类名称（默认为orbit-next / orbit-prev）到此元素。

这意味着如果将prev / next控件移出滑块包装器，它们将不再起作用，因为click事件将不再冒泡到包装器（因为它们不再是它的子元素）。

第一关：hackety-hackety-hack

一个hacky解决方法是在你喜欢的地方插入新的prev / next链接，然后绑定新的事件处理程序来模拟原始next / prev控件的点击（然后可以隐藏它们，因为它们不需要）：

// not ideal, don't do this unless the second method listed below doesn't work
$(document).ready(function() {
    var $captions = $('orbit-caption'),
        $orbit = $('#id-of-your-orbit'),
        $sliderNav = $orbit.find('slider-nav'),
        $oldNextBtn = $sliderNav.find('.left'),
        $oldPrevBtn = $sliderNav.find('.right'),
        $newNextBtns = $captions.find('.your-next-class'),
        $newPrevBtns = $captions.find('.your-prev-class');

    $sliderNav.hide();//hide it but leave in DOM so we can trigger clicks on it's contents below

    $newNextBtns.on('click', function(){
        $oldNextBtn.trigger('click');
    });

    $newPrevBtns.on('click', function(){
        $oldPrevBtn.trigger('click');
    });
});

更好的方法：绑定现有的自定义事件

但是，更简洁的解决方案是在单击控件时触发容器元素上的（未记录的AFAICS）orbit:next-slide或orbit:prev-slide事件，如下所示：

$(document).ready(function() {
    var $captions = $('orbit-caption'),
        $orbit = $('#slide-wrapper'),
        $nextBtns = $captions.find('.your-next-class'),
        $prevBtns = $captions.find('.your-prev-class');

    $orbit.find('slider-nav').remove();

    $nextBtns.on('click', function(){
        $orbit.trigger('orbit:next-slide');
    });

    $prevBtns.on('click', function(){
        $orbit.trigger('orbit:prev-slide');
    });
});

注意我没有测试过，但是查看源代码看起来应该工作。

使用jQuery将一个元素从一个点移动到另一个点

2 个答案:

第一关：hackety-hackety-hack

更好的方法：绑定现有的自定义事件