Question

我正在尝试制作一个＆＃34;幻灯片＆＃34;用文本更改div s。当显示最后一个div时，要显示的下一个div应该是第一个div。如果显示第一个div，并且您点击查看上一个{幻灯片显示}，则幻灯片显示应显示最后一个<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>。但它不起作用。

以下是代码：

HTML：

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

SCRIPT：

{{1}}

有人可以帮我解决吗？

Answer 1

我注意到的第一件事是你在文件准备就绪时设置你的id变量，这意味着它总是＆＃34; div01＆＃34;永远不会改变

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

此外，if文件只在文档准备就绪时被点击一次，因此它将永远不会检查它在第一次之后是什么ID。
您还为每个按钮分配了两个不同的单击事件，一个在if块中，另一个在if块下面。这可能会导致它跳过幻灯片，因为它会触发两个不同的点击事件，这两个事件都会更改活动幻灯片的内容。

您需要做的是在click事件中分配您的ID，以便每次单击其中一个按钮时它都会更改。您还需要在点击事件中执行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示例

以下是另一种无需检查ID的方法。

$(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示例

文字幻灯片无效

1 个答案: