Текст слайд-шоу не работает

Question

Текст слайд-шоу не работает

0

Я пытаюсь сделать "слайд-шоу" для изменения div с текстом внутри. Когда последний div отображается, следующий отображаемый div должен быть первым. Если первый div отображается, и вы нажимаете, чтобы увидеть предыдущий, в слайд-шоу должен отображаться последний div. Но он не работает.

Вот код:

HTML:

<div name="div-default" class="div-default">
    <?php
        echo "$name";
    ?>
</div>
<div id="div01" class="title-result active">
    <?php
        echo "Seu número de Personalidade é: $numerologia[0]";
    ?>
</div>
<div id="div02" class="title-result">
    <?php
        echo "Seu número de Destino é: $numerologia[1]";
    ?>
</div>
<div id="div03" class="title-result">
    <?php
        echo "Seu número de Lição de Vida é: $numerologia[2]";
    ?>
</div>
<div id="div04" class="title-result">
    <?php
        echo "O que sua data de Nascimento diz sobre você? $numerologia[3]";
    ?>
</div>
<div class="btm-box">
    <button  id="preview" class="change-div"></button>
    <button " id="next" class="change-div"></button>
</div>

СЦЕНАРИЙ:

jQuery(document).ready(function() {
    (function ($) {
        var a = $('.active').attr('id');
        //If I do not use the two conditions below, the code works partially, but don't do the loop.
        if (a == "div01") {
            $('#preview').on('click', function() {
                $('.active').removeClass('active');
                $("#div04").addClass('active');
            });

            $('#next').on('click',function() {
                $('.active').removeClass('active').next().addClass('active');
            });
        }

        if (a == "div04") {
            $('#next').on('click',function() {
                $('.active').removeClass('active');
                $("#div01").addClass('active');
            });

            ('#preview').on('click',function() {
                $('.active').removeClass('active').prev().addClass('active');
            });
        }

        $('#next').on('click',function() {
            $('.active').removeClass('active').next().addClass('active');
        });

        $('#preview').on('click',function() {
            $('.active').removeClass('active').prev().addClass('active');
        });

    })(jQuery);
});

Может ли кто-нибудь помочь мне исправить это?

Anderson 14 апр. 2014, в 21:12

Источник

2

показать это в jsfiddle.net
Alex 14 апр. 2014, в 18:37

Теги:

javascript

jquery

html

show-hide

slideshow

1 ответ

Ещё вопросы

Matt · Accepted Answer · 2014-04-14T18-10-00.000Z

Первое, что я заметил, это то, что вы устанавливаете свою переменную id в документе готовой, что означает, что она всегда будет "div01" и никогда не изменится.

jQuery(document).ready(function() {
    (function ($) {
        var a = $('.active').attr('id'); // a will always = div01

Кроме того, блоки if будут ударяться только один раз, когда документ готов, поэтому он никогда не будет проверять, какой идентификатор он первый раз.
Вы также назначаете два разных события клика для каждой кнопки, один в блоке if и один ниже блока if. Это может привести к тому, что он пропускает слайд, потому что он запускает два разных события кликов, которые изменяют то, что делает активный слайд.

Вам нужно назначить свой идентификатор внутри события click, чтобы он менялся каждый раз, когда вы нажимаете одну из кнопок. Вам также нужно будет делать ваши блоки if внутри событий ваших кликов.

// next button click event 
    $('#next').on('click',function() {
         var a = $('.active').attr('id');

         if (a == "div04"){
              $('.active').removeClass('active');
              $("#div01").addClass('active');
         }
         else{
              $('.active').removeClass('active').next().addClass('active');
         }
     });

Вот окончательный код.

$(function(){
     $('#next').on('click',function() {
          var a = $('.active').attr('id');

          if (a == "div04"){
               $('.active').removeClass('active');
               $("#div01").addClass('active');
          }
          else{
               $('.active').removeClass('active').next().addClass('active');
          }
     });

     $('#preview').on('click',function() {
          var a = $('.active').attr('id');
          if (a == "div01"){
               $('.active').removeClass('active');
               $("#div04").addClass('active');
          }
          else{    
               $('.active').removeClass('active').prev().addClass('active');
          }
     });
});

Здесь приведен рабочий пример jsfiddle

Ниже приведен другой способ, которым вы могли бы это сделать без необходимости проверять идентификаторы.

$(function(){
    var slides = $(".slide"); // gets all elements with the slide class
    $("#next").click(function(){
        var $active = $(".active");
        $active.removeClass("active");
        if($active.next(".slide").length > 0) // Check if next element exists
            $active.next(".slide").addClass("active");
        else
            $(slides[0]).addClass("active");  // Make first slide active
    });
    $("#prev").click(function(){
        var $active = $(".active");
        $active.removeClass("active");
        if($active.prev(".slide").length > 0) // check if next element exists
            $active.prev(".slide").addClass("active");
        else
            $(slides[slides.length -1]).addClass("active"); // Make last slide active
    }); 
});

Здесь рабочий пример jsfiddle