Question

很抱歉这是一小段代码，但我想用html中的两个箭头按钮向左或向右滚动图像栏。显示的错误是“Uncaught TypeError：无法读取属性'样式'的null 在movingImage“ 如果有人可以提供帮助，请告诉我。

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的问题，所以我做了一个快速的例子，说明你会做什么想要做一个＆＃34; angular＆＃34;做法。看看：

https://jsfiddle.net/26eLe0xo/

正如您在下面的代码中看到的，html后面有一个非常简单的控制器，它只有一个函数，它改变了与其作用域相关的值。更新值后，图像的style属性会更新，移动图像

＆＃13;

var myApp = angular.module('myApp', []);

myApp.controller('myCtrl',
  function($scope) {

    $scope.imgLeft = 100;

    $scope.moveImage = function(amount) {
      $scope.imgLeft += amount;
    }

  }
);

＆＃13;

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

＆＃13;

<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>

＆＃13;

你的代码不包含任何看起来像AngularJs的东西，除了你的html按钮中的ng-click标签，所以我建议不要在Angular中混合过多的vanilla js。

无论如何，document将成为您浏览器中的全局变量，因此您可以使用它，它很可能是Atom中的警告

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

1 个答案: