Question

如何使这个js仅影响原始悬停元素的子元素而不提供所有单独的.g_scroll或.left / .right标记id？＃/ p>

find

JSfiddle for（令人困惑，但必要）html结构：https://jsfiddle.net/6rbn18cL/

演示如何重命名：https://jsfiddle.net/z9u3azqy/

Answer 1

所以在这里，我“合并”了两个箭头处理程序然后，根据要滚动的宽度确定“滚动”速度需要进行计算，该速度可能不总是元素宽度的100％。

此脚本可让您轻松确定100％滚动的速度然后，如果已经滚动了距离，它会计算速度。

$(document).ready(function(){

  function moveit(arrow){

    // Adjust you delay here
    var delay = 2000; // delay to scroll 100%
    var animationDelay;

    var slider = arrow.siblings(".g_scroll");
    var distance = slider.width();
    var scrolled = slider.scrollLeft()+1; // +1 is to avoid infinity in the math below

    if(arrow.hasClass("scroller_l")){
      distance = -distance;
      animationDelay = -distance * (-distance/delay)*(-distance+scrolled);
    }else{
      animationDelay = distance * (distance/delay)*(distance-scrolled);
    }

    slider.stop().animate({scrollLeft:distance}, animationDelay, 'linear');
  }

  function stop(arrow){
    arrow.siblings(".g_scroll").stop();
  }


  $('.scroller_l, .scroller_r').hover(function(){
    moveit($(this));
  },function() {
    stop($(this));
  });

}); // ready

CodePen

<小时/> - 第一个答案 -

首先，您不能多次使用相同的id 因此，我从您的HTML中删除了id="left"和id="right"。

现在的诀窍是使用$(this)将哪个箭头悬停到您的函数中并找到.g_scroll元素，它是它的兄弟。

$(document).ready(function(){


  function loopRight(arrow){
    arrow.siblings(".g_scroll").stop().animate({scrollLeft:'+=20'}, 'fast', 'linear', loopRight);
  }

  function loopLeft(arrow){
    arrow.siblings(".g_scroll").stop().animate({scrollLeft:'-=20'}, 'fast', 'linear', loopLeft);
  }

  function stop(arrow){
    arrow.siblings(".g_scroll").stop();
  }


  $('.scroller_r').hover(function(){
    loopRight($(this));
  },function() {
    stop($(this));
  });

  $('.scroller_l').hover(function(){
    loopLeft($(this));
  },function() {
    stop($(this));
  });

});

CodePen

Answer 2

您可以传递事件对象并从那里找到合适的容器。

$('.scroller_l').hover(loopRight, stop);
$('.scroller_r').hover(loopLeft, stop);

如果您将函数作为上述参数传递，则会自动完成。

要为每个实例动态查找滚动容器，您可以使用这些类来查找相对于当前目标的容器：

var el = $(ev.currentTarget),
    parent = el.closest('.country_holder'),
    container = parent.find('.g_scroll');

查看工作示例here。

此时您可以问自己loopRight和loopLeft是否可以组合在一个函数中。唯一的区别是' - = 20'和'+ = 20'。使用多态性，您可以进一步重构。

重新排列js以适应更大的灵活性

2 个答案: