javascript - 我如何限制 jQuery 事件可以进行多远？

Question

$(document).ready(function() {
        var $left = $('#scroll-left');
        var $right = $('#scroll-right');
        var position = $('#article_body').css('left');
        if (position <= '-450px') {
            $left.click(function() {
                $('#article_body').animate({
                    left: '+=450px'
                }, '1000');
            });
        } else if (position >= '-4500px') {
            $right.click(function() {
                $('#article_body').animate({
                    left: '-=450px'
                }, '1000');
            });
        }

 });

我通过在包含的 div 上设置 CSS left 属性制作了一个水平滚动的页面。我想让它做的只是在 0px 和 -4500px 之间移动。因此，如果我向左单击并且它位于 0px，它只会向右移动，或者如果它位于 -4500px 并且我向右单击，它只会向左移动。

谢谢

Answer 1

您需要在处理程序内部进行检查，如下所示:

$(document).ready(function() {
  $('#scroll-left').click(function() {
    if ($('#article_body').css('left') <= '-450px') {
      $('#article_body').animate({ left: '+=450px' }, '1000');
    }
  });
  $('#scroll-right').click(function() {
    if ($('#article_body').css('left') >= '-4500px') {
      $('#article_body').animate({ left: '-=450px' }, '1000');
    }
  });
});

目前您在加载 DOM 时检查位置，而不是在单击按钮时。相反，你需要做相反的事情，并检查按钮何时被点击......就像上面一样。如果它在您检查的方向上滚动得太远(if 检查失败)，则点击将没有任何效果。