針對所有班級，僅選擇單擊的元素

Question

我昨天發布了一個問題，然后將其刪除，以為我認為我的代碼的這一部分沒有問題。 但是，經過測試似乎仍然存在問題。

在下面的代碼中，我希望$(this) 僅選擇clicked元素，而不是我定位的所有類。 但是，控制台記錄的2、3、4等...不是1！

基本上，我只需要將class“ action”添加到clicked元素中。 感謝任何幫助！

$("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)僅以“ moveable”類定位被點擊的元素，但是我需要在動態添加的元素上觸發事件，因此我以自己的方式綁定了該事件。 也許我這樣做的方式是問題嗎？

希望您能提供幫助！

麥克風

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; 

});