제이쿼리 반복될때 채택완료
$(".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');
});댓글을 작성하려면 로그인이 필요합니다.
각 클래스마다 스타일을 가지고 있는게 아니라면
div마다 클래스명을 다르게 주는건 일이 상당히 많아질텐데요
(this)를 사용하시면 쉽게 해결될거같네요
답변에 대한 댓글 1개
댓글을 작성하려면 로그인이 필요합니다.
댓글을 작성하려면 로그인이 필요합니다.
클래스명은 여러개 선언할 수 있으니
class="view02 view"
class="view01 view"
class="zoom01 zoom"
class="zoom02 zoom"
이런식으로 같은 역할을 하는 클래스에게 동일 클래스 명을 주신 후에
$(".view").mouseleave(function(){
$(".zoom").removeClass("scale");
$(".zoom").addClass("smaller");
})
이렇게 하시면 될 듯 하네요.
답변에 대한 댓글 2개
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");
})
}
[/code]
이렇게 하시고 갯수만큼 for문의 최댓값을 조절하셔도 됩니다.
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인
$(".view").mouseover(function(){
$(this).removeClass("smaller").addClass("scale");
}).mouseleave(function(){
$(this).removeClass("scale").addClass("smaller");
})
이런 구조일텐데 이 소스가 되는지는 모르겠네요