画像を独立して移動する方法

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(); 
    ...