jsをより柔軟に対応するために並べ替える

Question

個々の.g_scrollまたは.left/.rightタグのIDをすべて与えずに、jsが元のhovered要素の子要素にのみ影響するようにするにはどうすればよいですか？

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

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

    function stop(){ 
     $('.g_scroll').stop(); 
    } 


    $('#right').hover(function() { 
    loopRight().children(); 
    },function() { 
    stop(); 
    }); 

    $('#left').hover(function() { 
    loopLeft(); 
    },function() { 
    stop(); 
    }); 

（紛らわしいが、必要に応じて）HTML構造のためJSfiddle：https://jsfiddle.net/6rbn18cL/

が、それは名前を変更しなければならないであろう方法を示すために：だからここhttps://jsfiddle.net/z9u3azqy/

Answer 1

、私は両方の矢印ハンドラを "合併"。
次に、スクロールされる幅に基づいて「スクロール」速度を決定するために必要な計算がありますが、必ずしも要素の幅の100％である必要はありません。

このスクリプトでは、100％スクロールの速度を簡単に決定できます。
次に、すでに距離がスクロールされている場合に速度を計算します。

CodePen

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

---

--first answer--

まず、何度も同じ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を1つの機能で組み合わせることができるかどうかは、この時点で自分で判断できます。唯一の違いは ' - = 20'と '+ = 20'です。 多型を使用すると、これをさらにリファクタリングすることができます。