jQuery : 요소를 반복하고 CSS 스프라이트의 배경 위치로 이동

마우스 오버시 마주 칠 색상의 미리보기를 표시하는 견본 목록을 만드는 것입니다. 견본과 미리보기를 모두 전달하기 위해 CSS 스프라이트를 사용하고 있습니다. 작동하고 있지만 관련 jQuery를 제공하는 훨씬 효율적인 방법이 있다고 생각합니다. 좀 더 우아한 해결책을 찾는데 도움을 찾고 있습니다.jQuery : 요소를 반복하고 CSS 스프라이트의 배경 위치로 이동

<div class="chip-preview"></div> 
<div class="style-swatches"> 
<ul> 
    <li class="c1"></li> 
    <li class="c2"></li> 
    <li class="c3"></li> 
    <li class="c4"></li> 
    <li class="c5"></li> 
    <li class="c6"></li> 
    <li class="c7"></li> 
    <li class="c8"></li> 
    <li class="c9"></li> 
    <li class="c10"></li> 
    <li class="c11"></li> 
    <li class="c12"></li> 
</ul> 
</div>

그리고 내 관련 jQuery를 : 클래스 cN을의

$('.c1').hover(function() { 
    $(this).parents().find('.chip-preview').css("background-position","-195px 0"); 
}); 
$('.c2').hover(function() { 
    $(this).parents().find('.chip-preview').css("background-position","-390px 0"); 
}); 
$('.c3').hover(function() { 
    $(this).parents().find('.chip-preview').css("background-position","-585px 0"); 
}); 
$('.c4').hover(function() { 
    $(this).parents().find('.chip-preview').css("background-position","-780px 0"); 
}); 
$('.c5').hover(function() { 
    $(this).parents().find('.chip-preview').css("background-position","-975px 0"); 
}); 
$('.c6').hover(function() { 
    $(this).parents().find('.chip-preview').css("background-position","-1170px 0"); 
}); 
$('.c7').hover(function() { 
    $(this).parents().find('.chip-preview').css("background-position","-1365px 0"); 
}); 
$('.c8').hover(function() { 
    $(this).parents().find('.chip-preview').css("background-position","-1560px 0"); 
}); 
$('.c9').hover(function() { 
    $(this).parents().find('.chip-preview').css("background-position","-1755px 0"); 
}); 
$('.c10').hover(function() { 
    $(this).parents().find('.chip-preview').css("background-position","-1950px 0"); 
}); 
$('.c11').hover(function() { 
    $(this).parents().find('.chip-preview').css("background-position","-2145px 0"); 
}); 
$('.c12').hover(function() { 
    $(this).parents().find('.chip-preview').css("background-position","-2340px 0"); 
});

각 증가가 수평에 배경 -195px 이동

다음은 내 HTML입니다. 이 방법을 개선하는 방법에 대한 아이디어?

출처

2013-08-05 Brett D

모두에게 감사드립니다. 나는 대답으로 사용하고 싶은 것을 표시했다. –

이 시도 :

var xPosition = -195; 
$(".style-swatches li").each(function(){ 
    $(this).hover(function(){ 
     $(this).parents().find('.chip-preview').css("background-position", (xPosition - ($(this).index() * 195)) + "px 0"); 
    }); 
});

Fiddle

출처

2013-08-05 13:23:36

너희들은 빠르다! 나는 당신의 모범을 보았지만, 한 번만 움직 였고 -2000px 정도 나갔다. http://jsfiddle.net/zPtr6/ –

그게 옛날 .. 내 게시물을 수정했습니다. 수정 된 코드로 확인하십시오 .. –

Fiddle도 추가했습니다. –

이 같은

$('.c1, .c2, .c3').hover(function() { 
    var $this = $(this), pos = $this.attr('class').match(/\bc(\d+)\b/)[1]; 
    $(this).parents().find('.chip-preview').css('background-position','-' + (pos * 195) + 'px 0'); 
});

출처

2013-08-05 13:26:29

어쩌면 무언가를 시도? (아주 조잡하고 조심스럽게 사용하십시오!)

$("[class^='c']").hover(function() { 
    var classname = $(this).attr('class'); 
    var factor = substring(1); 
    var position = Number(factor) * -195; 
    position = position + "px 0"; 
    $(this).parents().find('.chip-preview').css("background-position", "-195px 0"); 
});

출처

2013-08-05 13:33:12 nthapa13

jQuery : 요소를 반복하고 CSS 스프라이트의 배경 위치로 이동

답변

관련 문제