Question

如何在参数中返回 next() 和 prev()？

2017-10-13

102

javascript jquery

我正在创建一个简单的滑块，它有 2 个按钮，代码几乎相同。唯一的区别是 next() 和 prev() 。所以我为此使用了一个参数 ( direction )。

在这种情况下，我收到错误：

Uncaught TypeError: Cannot read property 'length' of undefined

为什么？

$(document).ready(function() {

    // Navi
    function navi(direction) {
      if ($('.slider').find('.active').direction.length != 0) {
        $('.slider')
          .find('.active')
          .removeClass('active')
          .direction
          .addClass('active');   
       }
     }

    $('.next').on('click', function() {
    navi('next()');
  });

  $('.back').on('click', function() {
    navi('prev()');
  });

https://jsfiddle.net/n339tzff/3/

Answer 1

传递不带括号的字符串，使用括号表示法

$('.next').on('click', function() {
    navi('next');
});

if ($('.slider').find('.active')[direction]().length != 0)

Answer 2

我想出了这样的解决方案；

$(document).ready(function() {
    $('.next').click(function(){
      var x =  $('.active'); //grab active class because we will delete it soon
       $('.active').removeClass('active'); //now remove active class
      if($(x).next('img').length < 1){ //check if it is the last img element
         $('img').eq(0).addClass('active'); //if yes return to first img
      } else {
      $(x).next('img').addClass('active'); //else go on.
      }
    });
  $('.back').click(function(){
      var x =  $('.active');
       $('.active').removeClass('active');
     if($(x).prev('img').length < 1){
        $('img').eq(4).addClass('active');
     } else {
      $(x).prev('img').addClass('active');
     }
    });
});

在此脚本中，您可以使用导航按钮滑动下一张图像或上一张图像，并且循环将无限。

这里是 DEMO ：

$(document).ready(function() {
	$('.next').click(function(){
      var x =  $('.active');
       $('.active').removeClass('active');
      if($(x).next('img').length < 1){
         $('img').eq(0).addClass('active');
      } else {
      $(x).next('img').addClass('active');
      }
    });
  $('.back').click(function(){
      var x =  $('.active');
       $('.active').removeClass('active');
     if($(x).prev('img').length < 1){
        $('img').eq(4).addClass('active');
     } else {
      $(x).prev('img').addClass('active');
     }
    });
});

.slider {
    overflow: hidden;
    width: 100%;
    height: 400px;
}
.slider img { 
  float: left; 
  display: none;
}
.active {
  display: block !important;
}
.next, .back {
  width: 100px; 
  padding: 5px;
  text-align: center;
  background-color: skyblue;
  float: left;
  margin: 10px;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slider">
  <img src="http://keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg" alt="" class="active">
  <img src="https://www.w3schools.com/css/img_lights.jpg" alt="">
  <img src="http://keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image2.jpg" alt="">
  <img src="http://images.all-free-download.com/images/graphiclarge/a_london_cityscape_515129.jpg" alt="">
  <img src="https://image.jimcdn.com/app/cms/image/transf/dimension=1920x400:format=jpg/path/s86d6d6c688ca86fa/image/ie4265a3cd27b2997/version/1451246087/image.jpg" alt="">
</div>
<div class="back">Back</div>
<div class="next">Next</div>

Answer 3

您不能将字符串传递给函数并期望它充当可执行代码（除非您求助于 new Function() 或 eval() ，但您都不应该这样做）。但是，您可以编写一个简单的 if/them ，根据字符串输入执行正确的命令：

$(document).ready(function() {

      // Navi
      function navi(direction) {
        // You need this no matter what the direction is:
        var $active = $('.slider').find('.active');
        if(direction === "next" && $active.next().length === 1) {
            $active.removeClass('active');
            $active.next().addClass('active');;
        } else if(direction == "prev" && $active.prev().length === 1) {
            $active.removeClass('active');
            $active.removeClass(".active").prev().addClass('active');   
        }

      }

      $('.next').on('click', function() { navi('next'); });
      $('.back').on('click', function() { navi('prev'); });

    });

.slider {
    overflow: hidden;
    width: 100%;
    height: 400px;
}
.slider img { 
  float: left; 
  display: none;
}
.active {
  display: block !important;
}
.next, .back {
  width: 100px; 
  padding: 5px;
  text-align: center;
  background-color: skyblue;
  float: left;
  margin: 10px;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slider">
  <img src="http://keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg" alt="" class="active">
  <img src="https://www.w3schools.com/css/img_lights.jpg" alt="">
  <img src="http://keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image2.jpg" alt="">
  <img src="http://images.all-free-download.com/images/graphiclarge/a_london_cityscape_515129.jpg" alt="">
  <img src="https://image.jimcdn.com/app/cms/image/transf/dimension=1920x400:format=jpg/path/s86d6d6c688ca86fa/image/ie4265a3cd27b2997/version/1451246087/image.jpg" alt="">
</div>
<div class="back">Back</div>
<div class="next">Next</div>