Предыдущий + Следующий обмен местами лучше

Я искал весь день здесь и в других местах, чтобы найти способ заставить что-то работать, что, как я первоначально понял, было довольно простым. Я думаю, что наконец-то все заработало, но знаю, что должен быть более легкий путь. После того, как я ударился головой о стену, я прекращаю поиски и просто умоляю кого-то показать мне, как сделать это простым способом.

Вот что мне нужно сделать. На нескольких страницах сайта у меня есть кнопки "Назад" и "Далее", которые меняют, какой "div" активен в другой части моей страницы. Какой бы div не становился "активным" в данный момент времени, ему должен быть присвоен класс "активный", чтобы запускать другие события, такие как воспроизведение видео, звуковой эффект, анимация и т. Д. Тот же сценарий должен быть в состоянии вызывается с любого количества страниц, и общее количество "заменяемых" div будет меняться в зависимости от страницы. Если кнопка "Предыдущая" нажата, когда активен "первый" элемент div, или кнопка "Следующий" нажата, когда активен "последний" элемент div, никаких действий предпринимать не нужно.

Ниже мой 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. Заранее спасибо!

Источник

3 ответа

Решение

Пытаться

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

Демо: скрипка

Источник

Ваше решение:

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

Примечание: протестировано и работает*DEMO: http://jsfiddle.net/FPhsm/*

Источник

В этой демонстрации карусели вы можете иметь свой предыдущий и следующий элементы управления в любом месте страницы (см. Этот элемент). Вы также можете управлять несколькими каруселями одновременно, указав настраиваемый атрибут 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;
}
Источник
Другие вопросы по тегам