javascript - jQuery 绑定(bind)/取消绑定(bind)不起作用

Question

我正在尝试创建一个简单的 slider 。这是一个示例，但 slider 下一个和上一个按钮无法正常工作。

// next
var next = $('.next').click(function() {
  var storepos = $(".storepos").val();
  $('.prev').bind('click');
  $('.storepos').val($('.storepos').val() / 1 + 110);
  $('.container').animate({
    scrollLeft: $('.storepos').val()
  }, 200);
});

//prev
$('.prev').click(function() {
  var storepos = $(".storepos").val();
  $('.next').bind('click');
  $('.storepos').val($('.storepos').val() / 1 - 110);
  $('.container').animate({
    scrollLeft: $('.storepos').val()
  }, 200);
});

//after scrollend right event
$('.container').bind('scroll', function() {
  if ($('.container').scrollLeft() + $(this).innerWidth() >= $(this)[0].scrollWidth) {
    $('.next').unbind('click');
  }
});
//after scrollend left event                               
$('.container').bind('scroll', function() {
  if ($('.container').scrollLeft() < 1) {
    $('.prev').unbind('click');
  }
});

.container {
  overflow: hidden !important
}

.container::-webkit-scrollbar {
  width: 0;
  height: 0
}

.content {
  width: 1600px
}

.items {
  background: black;
  color: white;
  margin-left: 10px;
  width: 100px;
  height: 100px;
  float: left;
  text-align: center
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="content">
    <div class="items">1</div>
    <div class="items">2</div>
    <div class="items">3</div>
    <div class="items">4</div>
    <div class="items">5</div>
    <div class="items">6</div>
    <div class="items">7</div>
    <div class="items">8</div>
    <div class="items">9</div>
    <div class="items">10</div>
  </div>
</div>
<a href="#" class="prev">Prev</a> / <a href="#" class="next">Next</a>

<input class="storeposx" value="" />
<input class="storepos" value="" />

fiddle

Answer 1

我看到两个错误。首先，前一个按钮从请求开始就处于事件状态，可以滚动到负值。其次，当到达两端时，您确实会解除事件的绑定(bind)，但之后您不会将它们绑定(bind)回来。

我使用了两个变量来保存按钮状态。当我到达开始或结束位置时，我不会解除它们的绑定(bind)，而是在单击时返回 false。

// next
var next = $('.next').click(function() {
	if (!nextIsActive || $('.container').is(':animated')) return false;
	var storepos = $(".storepos").val();
	$('.prev').bind('click');
	$('.storepos').val($('.storepos').val() / 1 + 110);
	$('.container').animate({
		scrollLeft: $('.storepos').val()
	}, 200);
});

//prev
$('.prev').click(function() {
	if (!prevIsActive || $('.container').is(':animated')) return false;
	var storepos = $(".storepos").val();
	$('.next').bind('click');
	$('.storepos').val($('.storepos').val() / 1 - 110);
	$('.container').animate({
		scrollLeft: $('.storepos').val()
	}, 200);
});

var nextIsActive=true;
var prevIsActive=false;
//after scrollend right event
$('.container').bind('scroll', function() {
	if ($('.container').scrollLeft() + $(this).innerWidth() >= $(this)[0].scrollWidth) {
		nextIsActive=false;
		}else{
		nextIsActive=true;
	}
});
//after scrollend left event                               
$('.container').bind('scroll', function() {
	if ($('.container').scrollLeft() < 1) {
		prevIsActive=false;
		}else{
		prevIsActive=true;
	}
});

.container{overflow:hidden !important}
.container::-webkit-scrollbar {
    width:0;
    height:0
}
.content {width:1600px}
.items { background:black;
       color:white;
       margin-left:10px;
       width:100px;
       height:100px;
       float:left;
       text-align:center
      }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="content">
<div class="items">1</div>
<div class="items">2</div>
<div class="items">3</div>
<div class="items">4</div>
<div class="items">5</div>
<div class="items">6</div>
<div class="items">7</div>
<div class="items">8</div>
<div class="items">9</div>
<div class="items">10</div>
</div>
</div>
<a href="#" class="prev">Prev</a> / <a href="#" class="next">Next</a>

<input class="storeposx" value="" />
<input class="storepos" value="" />