Umordnen js für mehr Flexibilität

Question

Wie kann ich diese js beeinflussen nur die untergeordneten Elemente des ursprünglichen Elements hovered, ohne die einzelnen .g_scroll oder .left/.right-Tags ids?

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(); 
    }); 

JSfiddle für (verwirrend, aber notwendig) html Struktur: https://jsfiddle.net/6rbn18cL/

Um zu zeigen, wie es umbenannt werden müßte: https://jsfiddle.net/z9u3azqy/

Answer 1

Also hier, ich "verschmolzen" die beiden Pfeil-Handler.
Dann wird eine Berechnung benötigt, um die "Scroll" -Geschwindigkeit basierend auf der zu scrollenden Breite zu bestimmen, die nicht immer 100% der Breite des Elements betragen darf.

Mit diesem Skript können Sie leicht eine Geschwindigkeit für 100% Scrollen bestimmen.
Dann berechnet es die Geschwindigkeit, wenn bereits eine Strecke gescrollt ist.

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

---

--first answer--

Erstens können Sie nicht das gleiche id mehr als einmal verwendet werden.
So entfernte ichund id="right" von Ihrem HTML.

Jetzt ist der Trick zu übergeben, welcher Pfeil auf Ihre Funktionen mit $(this) schwebt.
Und finden Sie das .g_scroll Element, das ein Geschwister davon ist.

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

Sie können das Ereignis-Objekt übergeben und die richtigen Behälter von dort finden.

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

Dies geschieht automatisch, wenn Sie Funktionen wie die oben genannten Parameter übergeben.

Um den Scrollen Container dynamisch für jede Instanz finden Sie die Klassen verwenden können, um den Behälter relativ zum aktuellen Ziel zu finden:

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

here ein funktionierendes Beispiel sehen.

An dieser Stelle können Sie sich fragen, ob loopRight und loopLeft in einer Funktion kombiniert werden können. Der einzige Unterschied ist der '- = 20' und '+ = 20'. Mit Polymorphie können Sie dies noch mehr umgestalten.