針對所有的課程，只選擇被點擊的元素

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; 

});