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

demo

Answer 1

您可以使用以下代码段：

DEMO

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

更新了小提琴：http://jsfiddle.net/S4TfC/211/

.js

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

这会分别移动每一个。。。基本上它是“追随者”的每个实例化的一个倾听者，而“这个”引用了被点击的“追随者”。

Answer 3

您可以使用ID选择器。

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

或者为长度为$follower.length或http://api.jquery.com/each/

的数组中的每个元素指定一个事件

在页面加载http://api.jquery.com/ready/

之后处理所有内容的好主意

单击文档移动图像

3 个答案: