针对所有的课程，只选择被点击的元素

Question

我昨天发布了一个问题，然后删除它，认为我已经认为我的代码的这部分没有任何问题。但是，测试之后似乎仍然存在问题。

在下面的代码中我想$(this)选择只有被点击的元素，而不是我所针对的所有类。但是，控制台日志2,3,4等...不是1！

基本上我需要将类“动作”添加到单击的元素。感谢任何帮助！

$("body").on("mousedown", ".moveable", function(e){ 
    var clickX = mouseX; 
    var clickY = mouseY; 

    $(this).addClass("action"); 
    console.log($(".action").length); 

    inX = clickX - $(".action").position().left; 
    inY = clickY - $(".action").position().top; 

    timeout = setInterval(function(){ 

     $(".action").css("left", clickX + (mouseX - clickX) - inX); 
     $(".action").css("top", clickY + (mouseY - clickY) - inY); 

    }, 10); 

    return false; 

}); 

我知道我可以使用$(".moveable").on("mousedown", function() {...});，$(this)则目标仅仅是点击的元素的“可移动的”类，但我需要的触发事件，动态地添加的元素，因此我结合在我的方式活动。也许我这样做的方式是问题？

我希望你能帮忙！

Mike

Answer 1

我觉得你需要的是从下面的其他元素中删除动作类。另请注意，要缓存jQuery选择器，以便您不必始终运行选择器。

如果您要删除操作类，则还需要删除这些元素的间隔。

$("body").on("mousedown", ".moveable", function (e) { 
    var clickX = mouseX; 
    var clickY = mouseY; 

    $('.action').removeClass('action').each(function() { 
     //clear other element's interval also 
     clearInterval($(this).data('moveable-timer')); 
    }); 
    var $action = $(this).addClass("action"); 
    console.log($action.length); 

    var position = $action.position(); 
    inX = clickX - position.left; 
    inY = clickY - position.top; 

    var timeout = setInterval(function() { 

     $action.css("left", clickX + (mouseX - clickX) - inX); 
     $action.css("top", clickY + (mouseY - clickY) - inY); 

    }, 10); 
    $action.data('moveable-timer', timeout); 

    return false; 

}); 

Answer 2

在您的代码中，您始终将目标锁定为.action这是造成问题的类。用户$(this)，它只会定位当前元素。 试试这个：

$("body").on("mousedown", ".moveable", function(e){ 
    var clickX = mouseX; 
    var clickY = mouseY; 

    var $el = $(this); 
    $el.addClass("action"); 

    inX = clickX - $el.position().left; 
    inY = clickY - $el.position().top; 

    timeout = setInterval(function(){ 

     $el.css("left", clickX + (mouseX - clickX) - inX); 
     $el.css("top", clickY + (mouseY - clickY) - inY); 

    }, 10); 

    return false; 

});