jquery를 사용하여 html의 img 태그에서 src 속성을 변경하려고하는데, 사용자가 img 요소 위에 마우스를 올려 놓은 횟수에 따라 scr 속성이 다르게 변경되기를 원합니다.
내 HTML은 다음과 같이 설정됩니다.
<img id="element" src="img1.png">
내 js / jQuery는 다음과 같이 설정됩니다.
var count = 0;
if(count == 0){
$("#element").hover(function(){
count++;
$("#element").attr("src","img2.png");
}, function(){
$("#element").attr("src","img1.png");
});
} else if(count>=1){
$("#element").hover(function(){
count++;
$("#element").attr("src","img3.png");
}, function(){
$("#element").attr("src","img1.png");
});
}
호버 기능은 그 자체로 잘 작동하며 마우스를 올리거나 내리면 두 이미지간에 전환됩니다. 그러나 내 목표는 첫 번째 호버에서 img2로 전환 한 다음 두 번째 호버에서 img3으로 전환 한 다음 그 이후로 전환하는 것입니다. 내 호버 기능이 img1과 img2 또는 img 1과 img3 사이를 가리키고 싶다면 if 문과 count 변수를 제거하면 제대로 작동하는 것 같습니다.
누군가 내 문제를 식별하는 데 도움을 줄 수 있다면 제발.
호버 핸들러 내에서 카운터 확인을 수행해야합니다.
var counter = 0;
$("#element").hover(function() {
$(this).attr("src", ++counter > 1 ? '//placehold.it/64X64/00ff00' : '//placehold.it/64X64/0000ff');
}, function() {
$(this).attr("src", "//placehold.it/64X64/ff0000");
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<img id="element" src="//placehold.it/64X64/ff0000">코드에서 counter값은 카운터 값이 항상 0 인 페이지로드시 한 번만 확인됩니다.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다