이미지를 독립적으로 이동하는 방법

Question

이미지를 클릭하면 코드가 경고를 표시 한 다음 이동 단추로 이미지를 이동해야합니다. 이 문제는 다음 이미지를 클릭 할 때 발생합니다. 이동 단추는 이전에 클릭 한 이미지에서 작동합니다. 참고 : 각 이미지에 ID를 설정하지 않고이 작업을 수행해야합니다.

js 상자에 js를두면 왜 피들이 작동하지 않습니까? 당신이 거의 있었다 farm animals

$(document).ready(function() { 

    $("img").click(function() { 
    alert("a " + this.alt + " was clicked on!"); 
    var image = $(this); 

    $("#up").click(function() { 
     var offset = image.offset(); 
     $(image).offset({ 
     top: offset.top - 5, 
     left: offset.left 
     }) 
    }); 

    $("#down").click(function() { 
     var offset = image.offset(); 
     $(image).offset({ 
     top: offset.top + 5, 
     left: offset.left 
     }) 
    }); 

    $("#left").click(function() { 
     var offset = image.offset(); 
     $(image).offset({ 
     top: offset.top, 
     left: offset.left - 5 
     }) 
    }); 

    $("#right").click(function() { 
     var offset = image.offset(); 
     $(image).offset({ 
     top: offset.top, 
     left: offset.left + 5 
     }) 
    }); 

    }); 

}); 

Answer 1

이미지를 클릭 할 때마다 추가 클릭 핸들러를 정의하고 있습니다. 즉, 여러 개의 이미지를 한 번에 클릭 할 수 있지만 동일한 이미지를 여러 번 클릭 할 수 있으며 버튼을 누를 때마다 이미지를 더 멀리 이동할 수 있습니다.

버튼 클릭 핸들러는 한 번만 정의해야하며 이미지 클릭 핸들러가 image 값을 다시 할당하게하십시오.

var image; 

$("img").click(function() { 
    alert("a " + this.alt + " was clicked on!"); 
    image = $(this); 
}); 

$("#up").click(function() { 
    var offset = image.offset(); 
    $(image).offset({ 
    top: offset.top - 5, 
    left: offset.left 
    }) 
}); 

$("#down").click(function() { 
    var offset = image.offset(); 
    $(image).offset({ 
    top: offset.top + 5, 
    left: offset.left 
    }) 
}); 

... 

그것은 범위의 문제처럼 보이는 working example

Answer 2

jsfiddle HTML로 스크립트로 추가 된 경우에만 작동하는 것 같다. 문제는 click 처리기 내에서 image 변수를 재정의하는 것이며 외부에 있어야합니다. 수정 된 코드보기 (부분)

//this is the variable you will use in all your click handlers 
    var image; 
    $("img").click(function() { 
    //here you assign a specic image to it 
    image = $(this); 

    $("#up").click(function() { 
     //in every handler, just to be sure, check if ANY image has been clicked 
     if(!image) return; 
     var offset = image.offset(); 
    ...