다른 클래스에 대한 jquery 단일 mouseenter() 이벤트를 만드는 방법

Question

안녕하세요, 나는 하나의 일련의 mouseenter 이벤트를 그룹화하려고 노력하고 있습니다.하지만 저는 정말 새로운 자바 스크립트이고, 정말 혼란스러워서 모두 포함하도록 이벤트를 만들고 싶습니다. . "slider-button-1"클래스는 현재 5로 계산됩니다.

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

내 전체 프로젝트가 codepen에 ->codepen.io/FreeMaNn/pen/ZagweX

Answer 1

당신이

$("#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-'] 같은 것을 사용할 수 있습니다 시도 - slider-button-

^로 시작하는 모든 클래스를 선택 - * 시작 - $을 포함 -

로 끝

- 당신이 .closest('li')

Answer 2

귀하의 선택기가 될 것입니다 쉼표 (,)로 구분. 이

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

Answer 3

그것을 시도 사용할 필요가 그래서 ..이 0마다 돌아갑니다 $(this).index()를 사용하지 마십시오 있습니다 .. li 인덱스를 얻을. 효과가있을 것입니다.

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