javascript - 针对所有类(class)，只选择点击的元素

Question

我昨天发了一个问题然后删掉了，以为我的这部分代码没有问题。但是，经过测试，似乎仍然存在问题。

在下面的代码中，我希望$(this) 选择仅 单击的元素，而不是我定位的所有类。但是，控制台记录的是 2、3、4 等……而不是 1!

基本上我只需要将类“action”添加到被点击的元素。感谢任何帮助!

$("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) 然后仅针对具有“可移动”类的单击元素，但我需要事件触发动态添加的元素，因此我以我的方式绑定(bind)事件。也许我这样做的方式有问题？

希望对你有所帮助!

迈克

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;

});