javascript - 如何独立移动图像

单击图像时，代码应显示警报，然后移动按钮应移动图像。当您单击下一张图像时，会发生此问题。现在，移动按钮也可以对先前单击的图像进行操作。注意：我需要执行此操作，而无需在每个图像上设置ID

另外，当我将js放入js框时，为什么小提琴也不起作用？它似乎仅在作为脚本添加到html时才起作用

jsfiddle 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
      })
    });

  });

});

最佳答案

您每次单击图像时都在定义其他按钮单击处理程序。这意味着您可以单击多个图像并一次移动它们，但是也可以单击同一图像多次，并且按钮每次都将图像移动更大的距离。

您应该只定义一次按钮单击处理程序，然后让图像单击处理程序仅重新分配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

关于javascript - 如何独立移动图像，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/42043810/