背景没有像它应该的那样改变 - Jquery/Javascript/CSS

Question

Javascript菜鸟警报！

我现在必须制作一个有点复杂的网站，但我简化了它以专注于我的问题。

基本上，当用户按下上一个和下一个时，它应该显示 3 个图像（用颜色表示）。我不能使用第 3 方幻灯片，我需要遵循这个逻辑，因为正如我之前所说，最终网站非常复杂。

我不明白为什么我的 JS 不起作用。我确实认为它是无能的，我可以写得比这更好（我会接受有关这方面的提示），但我没有看到错误。如果您稍微浏览一下，您会发现上一页或下一页按钮在第一张幻灯片后停止工作。

感谢任何帮助。

$(document).ready(function() {
  $('.first').on('click', '.next', function() {
    $('body').addClass("second");
    $('body').removeClass("third");
    $('body').removeClass("first");
    event.preventDefault();
  })
});

$(document).ready(function() {
  $('.first').on('click', '.prev', function() {
    $('body').addClass("third");
    $('body').removeClass("second");
    $('body').removeClass("first");
    event.preventDefault();
  })
});

$(document).ready(function() {
  $('.second').on('click', '.prev', function() {
    $('body').removeClass("third");
    $('body').addClass("first");
    $('body').removeClass("second");
    event.preventDefault();
  })
});

$(document).ready(function() {
  $('.second').on('click', '.next', function() {
    $('body').addClass("third");
    $('body').removeClass("first");
    $('body').removeClass("second");
    event.preventDefault();
  })
});

$(document).ready(function() {
  $('.third').on('click', '.prev', function() {
    $('body').removeClass("first");
    $('body').addClass("second");
    event.preventDefault();
  })
});

$(document).ready(function() {
  $('.third').on('click', '.next', function() {
    $('body').removeClass("second");
    $('body').addClass("first");
    $('body').removeClass("third");
    event.preventDefault();
  })
});

.first {
  background-color: #0ff;
}
.second {
  background-color: #000;
}
.third {
  background-color: #ff0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body class="first">
  <nav class="slides-navigation">
    <a href="#" class="prev">Prev</a>
    <a href="#" class="next">Next</a>
  </nav>
</body>

Answer 1

真的没有必要为了如此简单的事情而使用这样的代码使您的生活复杂化。

var nums = ['first', 'second', 'third'];
var curr = 0;

$('.next, .prev').on('click', function(e) {
  // check which button is clicked and modify the curr value according to it
  var offset = $(this).hasClass('prev') ? nums.length - 1 : 1;
  curr = (curr + offset) % nums.length;          // avoid being out of index
  $('body').removeClass();
  $('body').addClass(nums[curr]);
})

.first {background-color: #0ff;}
.second {background-color: #000;}
.third {background-color: #ff0;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body class="first">
  <nav class="slides-navigation">
    <a href="#" class="prev">Prev</a>
    <a href="#" class="next">Next</a>
  </nav>
</body>

您的代码未按预期工作的原因是您绑定了这 6 个事件侦听器，但在代码运行时这 3 个元素中只有 1 个存在。您曾使用委派的侦听器，但方式不当。要使其工作，您需要首先 select non-changeable 父元素，在您的情况下，这将是 html 元素或文档，因为您正在更改正文类。所以，像这样：

$(document)...

而不是：

$('body')...

Answer 2

勾选这个希望对你有所帮助

$(document).ready(function() {
  $(document).on('click', 'body.first .next', function() {
    event.preventDefault();
    $('body').addClass("second");
    $('body').removeClass("third");
    $('body').removeClass("first");

  })

  $(document).on('click', 'body.first .prev', function() {
    event.preventDefault();
    $('body').addClass("third");
    $('body').removeClass("second");
    $('body').removeClass("first");

  })

  $(document).on('click', 'body.second .prev', function() {

    event.preventDefault();
    $('body').removeClass("third");
    $('body').addClass("first");
    $('body').removeClass("second");

  })


  $(document).on('click', 'body.second .next', function() {
    event.preventDefault();
    $('body').addClass("third");
    $('body').removeClass("first");
    $('body').removeClass("second");

  })

  $(document).on('click', 'body.third .prev', function() {
    event.preventDefault();
    $('body').removeClass("first");
    $('body').addClass("second");

  })

  $(document).on('click', 'body.third  .next', function() {
    event.preventDefault();

    $('body').removeClass("second");
    $('body').addClass("first");
    $('body').removeClass("third");

  })
});

.first {
  background-color: #0ff;
}
.second {
  background-color: #000;
}
.third {
  background-color: #ff0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body class="first">
  <nav class="slides-navigation">
    <a href="#" class="prev">Prev</a>
    <a href="#" class="next">Next</a>
  </nav>
</body>

Answer 3

试试这个，您可以使用此代码容纳任意数量的 classes。只需将 class 添加到数组 classArr

在javascript

$(document).ready(function() {
    var counter = 0;
    var classArr = ["first", "second", "third"];

    $('body').on('click', '.next, .prev', function(event) {
        $(this).hasClass("next") ? counter++ : counter--;
        changeClass();
        event.preventDefault();
    });

    function changeClass(){
        var indexClass = counter % classArr.length;
        indexClass = Math.abs(indexClass);
        $.each(classArr, function(index, value) {
            if (index == indexClass) {
                $('body').addClass(classArr[index]);
            } else {
                $('body').removeClass(classArr[index]);
            }
        });
     }

});

看jsfiddlehttps://jsfiddle.net/95hwwt8u/2/

$(document).ready(function() {
  var counter = 0;
  var classArr = ["first", "second", "third"];

  $('body').on('click', '.next, .prev', function(event) {
        $(this).hasClass("next") ? counter++ : counter--;
        changeClass();
        event.preventDefault();
    });
  
  function changeClass(){
    var indexClass = counter % classArr.length;
    indexClass = Math.abs(indexClass);
    $.each(classArr, function(index, value) {
      if (index == indexClass) {
        $('body').addClass(classArr[index]);
      } else {
        $('body').removeClass(classArr[index]);
      }
    });
  }

});

.first{
 background-color:#0ff;
 background-position: center -47px
}
.second{
 background-color:#000;
     background-position: center -47px
}
.third{
 background-color:#ff0;
 background-position: center -47px
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body class="first">
  <nav class="slides-navigation">    
          <a href="#" class="prev">Prev</a>
          <a href="#" class="next">Next</a>
  </nav>
</body>

Answer 4

   

 $(function() {
      
    
    $('#slide').on('click','.next',function(){
          if($('body').hasClass("first")){
           $('body').removeClass("first");
              $('body').addClass("second");
              event.preventDefault();
          } else  if($('body').hasClass("second")){
              $('body').removeClass("second");
              $('body').addClass("third");
              event.preventDefault();
          }  else  if($('body').hasClass("third")){
                $('body').removeClass("third");
                $('body').addClass("first");
                event.preventDefault();
           }                                       
       });
    
       
     
       
    
    $('#slide').on('click','.prev',function(){
                if($('body').hasClass("first")){
              $('body').removeClass("first");
                    $('body').addClass("third");
                    event.preventDefault();
                } else  if($('body').hasClass("second")){
                    $('body').removeClass("second");
                    $('body').addClass("first");
                    event.preventDefault();
                }  else  if($('body').hasClass("third")){
              $('body').removeClass("third");
                    $('body').addClass("second");
                    event.preventDefault();
                }                                       
             });
          });

.first {
  background-color: #0ff;
}
.second {
  background-color: #000;
}
.third {
  background-color: #ff0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    
     <body id='slide' class="first">
           <nav class="slides-navigation">   
              <a href="#" class="prev">Prev</a>
              <a href="#" class="next">Next</a>
           </nav>
       </body>

背景没有像它应该的那样改变 - Jquery/Javascript/CSS

Background isn't changing as it should - Jquery/Javascript/CSS

html

javascript

css

jquery

background-image