javascript - 使用箭头按钮和 javascript 向左或向右移动图像显示栏

Question

抱歉，这是一小段代码，但我正在尝试使用 html 中的两个箭头按钮向左或向右滚动图像栏。显示的错误是“未捕获类型错误:无法读取 null 的属性“样式” 在移动图像” 如果有人可以帮忙，请告诉我。

JS:

       function movingImage(el, e) {
            var amount = +e.target.dataset.amount;
            el.style.left = (el.offsetLeft + amount) + 'px';
        }

        var div = document.getElementById("movingImage");
        var buttons = document.querySelectorAll('button');

        [].slice.call(buttons).forEach(function (button) {
            button.onclick = movingImage.bind(this, div);
        });

HTML:

    <button data-amount="-100"><div class="arrow left small" ng-click="changeColour(index-1)" ng-src="{{colour.thumbMedia | smcmediaurl}}"></div></button>
    <button data-amount="100"><div class="arrow right small" ng-click="changeColour(index+1)" ng-src="{{colour.thumbMedia | smcmediaurl}}"></div></button>

<div id="movingImage>where images go</div>

Atom 还说文档未定义，但不确定这是否是一个问题，因为控制台中没有显示。

谢谢!!

Answer 1

很难说出你在做什么，因为你混合了一些不同的东西，但你将这个问题标记为 AngularJs 问题，所以我做了一个简单的例子来说明你想要用“Angular ”做什么方法。看看:

https://jsfiddle.net/26eLe0xo/

正如您在下面的代码中看到的，html 后面有一个非常简单的 Controller ，它只有一个函数，用于更改与其作用域关联的值。当值更新时，图像的 style 属性也会更新，从而移动图像

var myApp = angular.module('myApp', []);

myApp.controller('myCtrl',
  function($scope) {

    $scope.imgLeft = 100;

    $scope.moveImage = function(amount) {
      $scope.imgLeft += amount;
    }

  }
);

#movingImg img {
  position: absolute;
  top: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" id="movingImg">
  <div ng-controller="myCtrl">
    <img ng-style="{'left': imgLeft+'px'}" src="http://images2.wikia.nocookie.net/__cb20110811172434/fallingskies/images/f/fd/Totoro_normal.gif" />

    <button ng-click="moveImage(-10)">&lt--</button>
    <button ng-click="moveImage(10)">--&gt</button>
  </div>
</div>

除了 html 按钮中的 ng-click 标签之外，您的代码不包含任何看起来像 AngularJs 的内容，因此我建议不要将太多的普通 js 与 Angular 混合在一起。

无论如何，document 将是浏览器中的全局变量，因此您可以接受，这很可能是 Atom 中的警告