JQuery click() 이상한 동작

간단한 사진 갤러리 기능을 만들고 싶습니다. 그러나 JQuery의 click()에는 이상한 동작이 있습니다.JQuery click() 이상한 동작

사용자가 앞으로 버튼을 클릭하면 다음 10 개의 이미지가 표시됩니다. 사용자가 뒤로 버튼을 클릭하면 이전 이미지 10 개가 표시됩니다.

다음 코드에서 내 코드에서 올바르게 작동하는 4 개의 행이 주석 처리됩니다. JQuery click()이 주석 처리 된 줄과 동일한 작업을 수행해야한다고 생각하지만 그렇지 않습니다. 뒤로 및 앞으로 여러 번 클릭하면 JQuery click()을 사용하는 코드가 작동하지 않습니다. 코드의 어디에 문제가 있는지 물어보고 싶습니다. 고맙습니다.

<script type="text/javascript"> 
$(document).ready(function() { 

var numImages = imagesObj.images.image.length; 
var imagePath = "images/"; 
var currentIndex = 0; 


function changeImageList(startIndex){ 

    var imageIndex = 0; 
    $("#imagesList img").css("display","none"); 
    for (var i=startIndex; i<numImages && i<startIndex + 10; i++) 
    { 
     var imageId = "image" + imageIndex; 
     var image = imagesObj.images.image[i]; 

     $("#" + imageId).attr("src",imagePath + image.imageurl).css("display",""); 

     imageIndex++; 
    } 

    currentIndex = startIndex; 
    if (numImages > currentIndex+10){ 
     $('#forward').css("cursor","pointer"); 
     //document.getElementById("forward").onclick = function(){changeImageList(currentIndex+10);}; 
     $('#forward').click(function(){ changeImageList(currentIndex+10);}); 
    }else{ 
     $('#forward').css("cursor","default"); 
     //document.getElementById("forward").onclick = function(){}; 
     $('#forward').click(function(){}); 
    } 

    if (currentIndex < 10){ 
     $('#backward').css("cursor","default"); 
     //document.getElementById("backward").onclick = function(){}; 
     $('#backward').click(function(){}); 
    }else{ 
     $('#backward').css("cursor","pointer"); 
     //document.getElementById("backward").onclick = function(){changeImageList(currentIndex-10);}; 
     $('#backward').click(function(){changeImageList(currentIndex-10);}); 

    } 
} 

    changeImageList(0); 

}); 

</script> 

</head> 
<body> 
<table border="0" cellpadding="0" cellspacing="0"> 
     <tr> 
     <td align="center"><img id="backward" src="images/lft_arrow.gif" alt="" width="39" height="44" /></td> 
     <td id="imagesList" align="center"> 
     <img id="image0" width="77" style="display:none; cursor:pointer" /> 
     <img id="image1" width="77" style="display:none; cursor:pointer" /> 
     <img id="image2" width="77" style="display:none; cursor:pointer" /> 
     <img id="image3" width="77" style="display:none; cursor:pointer" /> 
     <img id="image4" width="77" style="display:none; cursor:pointer" /> 
     <img id="image5" width="77" style="display:none; cursor:pointer" /> 
     <img id="image6" width="77" style="display:none; cursor:pointer" /> 
     <img id="image7" width="77" style="display:none; cursor:pointer" /> 
     <img id="image8" width="77" style="display:none; cursor:pointer" /> 
     <img id="image9" width="77" style="display:none; cursor:pointer" /> 
     </td> 
     <td align="center"><img id="forward" src="images/rgt_arrow.gif" alt="" width="39" height="44" /></td> 
     </tr> 
    </table> 
</body>

출처

2009-03-14 Billy

이 바인딩 이벤트의 정상적인 동작은 다음과 같습니다 당신이 click를 호출 할 때, 이벤트 콜백 가 기존 콜백을 대체하지 않습니다 요소에 및 을 추가합니다. 당신이 뒤로 앞으로 버튼을 여러 번 클릭하면 click 이벤트에 대한 여러 핸들러를 할당하고 지금 당신이 나쁜 것을 알고 :)

당신에게 두 가지 해결책이 있습니다 문제 :

사용 예 $('#backward').unbind('click') 전 새 이벤트를 지정하면 코드에 대한 쉬운 수정입니다.

상대 인덱스가있는 버튼에 하나의 이벤트 만 지정하십시오 (예 : $('#backward').click(function(){ changeImageList(-10);});). 나는 그것이 더 깨끗한 것을 찾는다. changeImageList의 처음에 startIndex을 계산하지만, 여전히 기본/포인터로 커서를 설정해야한다.

출처

2009-03-14 08:38:27 ybo

JQuery click() 이상한 동작

답변

관련 문제