上一个 + 下一个 div 交换更好的方法

Question

我在这里和其他地方整天都在寻找一种方法来使我最初认为很简单的事情发挥作用。我想我终于让它工作了，但知道必须有一个更简单的方法。在将我的头撞到墙上之后，我放弃了我的搜索，只是乞求有人告诉我如何以简单的方式做到这一点。

这是我需要做的。在网站的几个页面上，我有一个“上一个”和“下一个”按钮，用于交换在我的页面的另一部分上哪个“div”处于活动状态。无论哪个 div 在给定时间变为“活动”，都需要赋予“活动”类以触发其他事件，如视频开始播放、声音效果、动画等。相同的脚本需要能够从任意数量的页面之一调用，并且“可交换” div 的总数将根据页面而变化。如果在“第一个”div 处于活动状态时按下 Previous 按钮，或者在“last”div 处于活动状态时按下 Next 按钮，则不应执行任何操作。

下面是我的javascript

function swap(what) {
"use strict";
var theDivs = [], i;
$(".PortSwap").each(function() {
    var cid = $(this).attr("id");
    theDivs.push(cid);
});
for (i = 0; i < theDivs.length; i+=1) {
    if ($("#" + theDivs[i]).hasClass('active')) {
        var curDiv = i;
    } 
    $("#" + theDivs[i]).removeClass('active');
    $("#" + theDivs[i]).hide();
}
if (what === 1) {
    if ((curDiv + 1) < theDivs.length){
        $("#" + theDivs[curDiv + 1]).addClass('active');
        $("#" + theDivs[curDiv + 1]).show();
    } else {
        $("#" + theDivs[curDiv]).addClass('active');
        $("#" + theDivs[curDiv]).show();
    }           
} else {
    if ((curDiv - 1) >= 0){
        $("#" + theDivs[curDiv - 1]).addClass('active');
        $("#" + theDivs[curDiv - 1]).show();
    } else {
        $("#" + theDivs[curDiv]).addClass('active');
        $("#" + theDivs[curDiv]).show();
    }
}
}
window.onload = function () {
    "use strict";
    var pDivs = $(".PortSwap"), k;
    for (k = 0; k < pDivs.length; k += 1) {
        if (pDivs[k] !== -1) {
            $(".PortSwap").hide();
        }
    }
    $('#swap0').show();
    $('#swap0').addClass("active"); 
};

下面是我的html

 <div id="content">
  <div id="ncholder">
    <div id="ncframe"></div>
    <div class="PortSwap" id="swap0"><img src="img/nvc1.jpg" alt="Web Screen 1"></div>
    <div class="PortSwap" id="swap1"><img src="img/nvc2.jpg" alt="Web Screen 2"></div>
    <div class="PortSwap" id="swap2"><img src="img/nvc3.jpg" alt="Web Screen 3"></div>
  </div>
  <div id="ncnav">
    <img src="img/backward.gif" alt="Previous" onClick="swap(0)">
    <img src="img/forward.gif" alt="Next" onClick="swap(1)">
  </div>
</div>
</div>

我的印象是 css 在这里并不重要，我尝试为此创建一个 jsFiddle，但即使它目前似乎正在我的测试服务器上工作，也无法让它工作。

请帮忙！我对javascript并不陌生，尽管已经有一段时间了。我是 jQuery 的新手。 提前致谢！

Answer 1

试试

<div id="content">
    <div id="ncholder">
        <div id="ncframe"></div>
        <div class="PortSwap" id="swap0">1<img src="img/nvc1.jpg" alt="Web Screen 1"/></div>
        <div class="PortSwap" id="swap1">2<img src="img/nvc2.jpg" alt="Web Screen 2"/></div>
        <div class="PortSwap" id="swap2">3<img src="img/nvc3.jpg" alt="Web Screen 3"/></div>
     </div>
    <div id="ncnav">
        <img src="img/backward.gif" alt="Previous" onClick="prev()"/>
        <img src="img/forward.gif" alt="Next" onClick="next()"/>
    </div>
</div>

JS

$(function(){
    "use strict";
    $('.PortSwap').hide().eq(0).addClass('active').show();
});

function prev(){
    var current = $('.PortSwap.active'), prev = current.prev('.PortSwap');
    console.log(prev.length, prev)
    if(prev.length){
        current.hide().removeClass('active');
        prev.addClass('active').show();
    }
}
function next(){
    var current = $('.PortSwap.active'), next = current.next('.PortSwap');
    if(next.length){
        current.hide().removeClass('active');
        next.addClass('active').show();
    }
}

演示：Fiddle

Answer 2

您的解决方案：

HTML 代码

<div id="content">
    <div id="ncholder">
        <div id="ncframe"></div>
        <div class="PortSwap" id="swap_0">1<img src="img/nvc1.jpg" alt="Web Screen 1"/></div>
        <div class="PortSwap" id="swap_1">2<img src="img/nvc2.jpg" alt="Web Screen 2"/></div>
        <div class="PortSwap" id="swap_2">3<img src="img/nvc3.jpg" alt="Web Screen 3"/></div>
     </div>
    <div id="ncnav">
        <img src="img/backward.gif" alt="Previous"/>
        <img src="img/forward.gif" alt="Next"/>
    </div>
</div>

仅限 jQuery 代码：

$(function(){
    //this will hide all elements with the class 'portswap';
    //Recommend you set the style (CSS) of PortSwap to 'display: none',
    //so as to avoid flash of unstyled content;
    $(".PortSwap").not('#swap_0').hide();
    $('#swap_0').addClass("active");

    $('.btn_nav').on('click',function(){
        var activediv = $('.PortSwap.active').first();
        var activediv_id = parseInt(activediv[0].id.split('_')[1]);
        switch(this.id){
            //execute code when backward button is pressed
            case 'btn_backward':
                if(activediv_id-1 >= 0){
                    //previous iteration of div is present, show it
                    activediv.removeClass('active').hide();                                
                    $('#swap_'+(activediv_id-1)).show().addClass('active');
                } else {
                    //No previous div is present, remain on same page.
                }
                break;
            //execute code when forward button is pressed
            case 'btn_forward':
                if(activediv_id+1 < $('.PortSwap').length){
                    //Next iteration of div is present, show it
                    activediv.removeClass('active').hide();                                
                    $('#swap_'+(activediv_id+1)).show().addClass('active');
                } else {
                    //No next div is present, remain on same page.
                }                            
                break;
        }
    }); 
});

注意：经过测试和工作 *演示：http://jsfiddle.net/FPhsm/*

Answer 3

在此轮播演示中，您可以在页面上的任何位置设置上一个和下一个控件（请参阅此plunker）。您还可以通过使用轮播选择器在控件上指定自定义属性 data-carousel 来同时控制多个轮播。

Html（部分代码，完整演示见plunker）

<div id="my-carousel" class="carousel">
    <div class="buttons">
        <a class="prev" href="#" data-carousel="#my-carousel"><</a>
        <a class="next" href="#" data-carousel="#my-carousel">></a>
    </div>
    <div class="items">
        <div class="item active">Item #1</div>
        <div class="item">Item #2</div>
        <div class="item">Item #3</div>
    </div>
</div>

Javascript

// executed on document ready
$(function(){

  // get the active item, if it is not the first, set previous as active
  function prev() {
    var $item = $($(this).data('carousel')).find('.item.active');
    if (!$item.is(':first-child')) {
      $item.removeClass('active').prev('.item').addClass('active');
    }
  }

  // get the active item, if it is not the last, set next as active
  function next() {
    var $item = $($(this).data('carousel')).find('.item.active');
    if (!$item.is(':last-child')) {
      $item.removeClass('active').next('.item').addClass('active');
    }
  }

  // bind the controls to the actions
  $('a.prev').on('click', prev);
  $('a.next').on('click', next);

});

CSS

/* make all items hidden by default */
.carousel > .items > .item {
  display: none;
}

/* make active item shown */
.carousel > .items > .item.active {
  display: block;
}