How to create a jquery single mouseenter() events for different classes

Question

Hi I am trying to group a series of mouseenter events to one but I am really new to javascript and getting really confused I want to create one event to include them all.".slider-button-1" classes counting to 5 for now.

$("#slider-s-pic .slider-button-1").mouseenter(function () {
    $(".slider-inner ul").animate({ marginLeft: "-" + (liWidth * 0) + "px" });
});

My whole project is in codepen -> codepen.io/FreeMaNn/pen/ZagweX

Answer 1

you can use something like

$("#slider-s-pic a[class^='slider-button-']").mouseenter(function () {
    var GetIndex = $(this).closest('li').index();
    $(".slider-inner ul").animate({ 
       marginLeft: "-" + (liWidth * GetIndex) + "px" 
     });
});

a[class^='slider-button-'] - select all classes which starts with slider-button-

^ - starts with * - contains $ - ends with

var GetIndex = $(this).closest('li').index(); - get the li index .. Don't use $(this).index() it'll return 0 each time .. so you need to use .closest('li')