제이쿼리 반복될때
본문
$(".view01").mouseover(function(){
$(".zoom01").removeClass("smaller");
$(".zoom01").addClass("scale");
})
$(".view01").mouseleave(function(){
$(".zoom01").removeClass("scale");
$(".zoom01").addClass("smaller");
})
$(".view02").mouseover(function(){
$(".zoom02").removeClass("smaller");
$(".zoom02").addClass("scale");
})
$(".view02").mouseleave(function(){
$(".zoom02").removeClass("scale");
$(".zoom02").addClass("smaller");
})
위와 같이 동일한 제이쿼리문이 반복될때
클래스명이 01,02,03..이런식으로 늘어나는데요~
이걸 간단하게 줄여서 사용할 수 있는 방법이 있을까요??
답변 4
// 구조에 따라 선택 방법이 다양합니다. 질문의 코드 기반으로 같은 역할하는 간단한(?) 코드 첨부합니다.
$('[class^=view]')
.mouseenter(function() {
var zoom = $('.zoom'+$(this).attr('class').match(/view(\d{2})/)[1]);
zoom.removeClass('smaller');
zoom.addClass('scale');
})
.mouseleave(function() {
var zoom = $('.zoom'+$(this).attr('class').match(/view(\d{2})/)[1]);
zoom.removeClass('scale');
zoom.addClass('smaller');
});
클래스명은 여러개 선언할 수 있으니
class="view02 view"
class="view01 view"
class="zoom01 zoom"
class="zoom02 zoom"
이런식으로 같은 역할을 하는 클래스에게 동일 클래스 명을 주신 후에
$(".view").mouseleave(function(){
$(".zoom").removeClass("scale");
$(".zoom").addClass("smaller");
})
이렇게 하시면 될 듯 하네요.
답변감사합니다~ 그런데 저렇게 하면 같은 이름을 가진 div가 다같이 반응을 해버려서요ㅠㅠ
for(var i =1; i<=10;i++){
$(".view0"+ i).mouseover(function(){
$(".zoom0"+ i).removeClass("smaller");
$(".zoom0"+ i).addClass("scale");
})
$(".view0"+ i).mouseleave(function(){
$(".zoom0"+ i).removeClass("scale");
$(".zoom0"+ i).addClass("smaller");
})
}
이렇게 하시고 갯수만큼 for문의 최댓값을 조절하셔도 됩니다.
html 소스까지 함께 올려주셔야 정확한 답변이 가능한 질문입니다.
각 클래스마다 스타일을 가지고 있는게 아니라면
div마다 클래스명을 다르게 주는건 일이 상당히 많아질텐데요
(this)를 사용하시면 쉽게 해결될거같네요
<div class="view"></div>
$(".view").mouseover(function(){
$(this).removeClass("smaller").addClass("scale");
}).mouseleave(function(){
$(this).removeClass("scale").addClass("smaller");
})
이런 구조일텐데 이 소스가 되는지는 모르겠네요
