jQuery Div Slider无法正常工作？

Question

所以我正在寻找一个像这样的jQuery div滑块：

http://plnkr.co/edit/ZdCw7IEYdV5YVeGg33oX?p=preview

我试图更改下面列出的jQuery：

<script data-require="jquery" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

然而，当我运行它时，按钮不起作用。

有人可以帮忙吗？

我试图了解出现了什么问题，但我无法弄清楚。

Answer 1

您必须将event.preventDefault()作为参数添加到您的函数中，因为在调用ReferenceError: event is not defined[Learn More] script.js:11:7 ReferenceError: event is not defined[Learn More] script.js:4:7 时会出现以下错误：

$('#right-button').click(function(event) {
  ...
}

$('#left-button').click(function(event) {
  ...
}

像这样更改你的代码：

$('#right-button').click(function(event) {
  event.preventDefault();
  $('#content').animate({
    scrollLeft: "+=200px"
  }, "slow");
});

$('#left-button').click(function(event) {
  event.preventDefault();
  $('#content').animate({
    scrollLeft: "-=200px"
  }, "slow");
});

例如：

/* Put your css in here */

.left {
  float: left;
  width: 30%;
  height: 200px;
  border: 1px solid black;
}

.internal {
  width: 31.75%;
  height: 100%;
  border: 1px solid black;
  display: inline-block;
}

.center {
  float: left;
  width: 38.9%;
  height: 200px;
  border: 1px solid black;
  margin: 1px;
  overflow: auto;
  /*will change this to hidden later to deny scolling to user*/
  white-space: nowrap;
}

.right {
  float: right;
  width: 30%;
  height: 200px;
  border: 1px solid black;
}

<script data-require="jquery" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="left">
  left div
  <button id="left-button">
      swipe left
    </button>
</div>
<div class="center" id="content">
  <div class=internal>
    div 1
  </div>
  <div class=internal>
    div 2
  </div>
  <div class=internal>
    div 3
  </div>
  <div class=internal>
    div 4
  </div>
  <div class=internal>
    div 5
  </div>
  <div class=internal>
    div 6
  </div>
  <div class=internal>
    div 7
  </div>
  <div class=internal>
    div 8
  </div>
</div>
<div class="right">
  <button id="right-button">
      swipe right
    </button> right div
</div>

{{1}}