背景并没有改变 - Jquery / Javascript / CSS

时间：2015-12-28 17:30:16

标签： javascript jquery html css background-image

Javascript noob alert！

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

Check Codepen

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

我不明白为什么我的JS不起作用。我确实觉得它不合适，而且我写得比这更好（我会接受关于此的提示），但我没有看到错误。如果您稍微浏览一下，您会看到在第一张幻灯片后，上一个或下一个按钮停止工作。

感谢任何帮助。

＆＃13;
＆＃13; 
$(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();
  })
});
＆＃13; 
.first {
  background-color: #0ff;
}
.second {
  background-color: #000;
}
.third {
  background-color: #ff0;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

4 个答案:

答案 0 :(得分：3)

检查这个希望它对你有帮助。

＆＃13;
＆＃13; 
$(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");

  })
});
＆＃13; 
.first {
  background-color: #0ff;
}
.second {
  background-color: #000;
}
.third {
  background-color: #ff0;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：1)

对于这么简单的事情来说，真的没有必要让你的生活复杂化。

＆＃13;
＆＃13; 
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]);
})
＆＃13; 
.first {background-color: #0ff;}
.second {background-color: #000;}
.third {background-color: #ff0;}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

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

$(document)...

而不是：

$('body')...

答案 2 :(得分：0)

试试这个，您可以使用此代码容纳任意数量的类。只需将类添加到数组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]);
            }
        });
     }

});

请参阅js fiddle https://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>

答案 3 :(得分：0)

＆＃13;
＆＃13; 
   

 $(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();
                }                                       
             });
          });
＆＃13; 
.first {
  background-color: #0ff;
}
.second {
  background-color: #000;
}
.third {
  background-color: #ff0;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题