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)然后只使用“可移动”类定位被点击的元素，但我需要事件来触发动态添加的元素，因此我将事件绑定在我是这样的。也许我这样做的方式就是问题？

我希望你能帮忙！

麦克

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; 

});

定位所有课程，只选择点击的元素

2 个答案: