单击文档移动图像

Question

我已经成功地通过单击文档同时移动了三个图像，但我正在尝试设置它，以便可以分别控制每个图像。我有点不知道如何做到这一点，我上个月刚刚开始

var $follower = $(".follower"),
  mouseX = 0,
  mouseY = 0;
$(document).click(function (e) {
    mouseX = e.pageX;
    mouseY = e.pageY;
   $follower.stop().animate({
      left: mouseX,
      top: mouseY
  });
});

演示

Answer 1

您可以使用以下代码段：

演示

var $follower = $(".follower").on('click',function(e){
    e.stopPropagation();
    $(this).toggleClass('selected');
}),
    mouseX = 0,
    mouseY = 0;
$(document).click(function (e) {
    mouseX = e.pageX;
    mouseY = e.pageY;
    $follower.filter('.selected').stop().animate({
        left: mouseX,
        top: mouseY
    });
});

Answer 2

更新的fiddle：http://jsfiddle.net/S4TfC/211/

.js

$('.follower').click(function (e) {
mouseX = e.pageX;
mouseY = e.pageY;
$(this).stop().animate({
    left: mouseX,
    top: mouseY
});
});

这将单独移动每个。基本上，它是"follower"的每个实例化的一个监听器，"this"引用了被单击的"followers"。

Answer 3

您可以使用ID选择器。

$("#boat").click(function(){
  alert('This is boat!');
});

或者为长度为$follower.length的数组中的每个元素分配一个事件，或者http://api.jquery.com/each/

在页面加载后处理所有内容是个好主意http://api.jquery.com/ready/