jquery 루프 호버 버튼

괜찮 았는데 6 개의 버튼이 있는데, 6 개의 버튼 중 하나를 가리키면 jquery 리스너를 갖기 위해 클래스를 변경합니다.jquery 루프 호버 버튼

$(document).ready(function() { 
for($i=1;$i<7;$i++) { 
     $('#button'+i).hover(function() { 
     $(this).addClass('hovering'); 
     }, function() { 
     $(this).removeClass('normal'); 
     }); 
} 
});

각 버튼은 "buttonx"(은 x되는 숫자)

도움의 ID를 가지고 메신저 루프에 대한이, heres는 내 코드를 어떻게 사용하고 계십니까?

출처

2010-03-11 john morris

HTML을 보는 것이 도움이됩니다. 원하는 효과를 얻는 데는 여러 가지 방법이 있지만 상황에 따라 매우 명확하고 간결한 방법이있을 수 있습니다. –

당신은 perl/PHP 프로그래머 여야합니다. 당신은 i 변수 앞에'$'가 필요하지 않습니다 :) – ryeguy

루프를 사용할 필요가 없습니다. id에서 startsWith 선택기 속성을 사용하기 만하면됩니다. 또한 클래스를 적용/제거하는 방법을 변경하여 클래스가 정상 및 호버 모두를 갖지 않도록 할 수 있습니다.

$('[id^=button]').hover(function() { 
    $('[id^=button]').removeClass('hovering'); 
    $(this).addClass('hovering').removeClass('normal'); 
}, 
function() { 
    $(this).removeClass('hovering').addClass('normal'); 
});

출처

2010-03-11 18:46:06 tvanfosson

괜찮 았어. –

생성 된 ID 묶음을 반복 할 필요가 없습니다. 호버를 '정상'클래스로 모든 버튼의 컬렉션을 반환합니다

$("button.normal").hover(function() { 
    $(this).addClass("hovering"); 
}, function() { 
    $(this).removeClass("hovering"); 
});

'button.normal'를, 그래서 루프에 대한 필요가 없습니다 : 당신은 단순히 '정상'그들의 클래스를 각을 줄 수 있으며, 이벤트는 컬렉션의 모든 요소에 적용됩니다.

출처

2010-03-11 18:44:55 karim79

그는'button' 태그를 사용하지 않을 수도 있습니다. 그의 코드는'button 'id를 사용하고 있습니다. –

karim79의 대답은 좋은 방법입니다.

코드에서 루프 카운터를 '$ i'로 선언했지만 'i'를 참조하려고합니다. $ ('# button'+ $ i)이어야합니다.

출처

2010-03-11 18:50:35

jquery 루프 호버 버튼

답변

관련 문제