定位所有类，仅选择单击的元素(Targeting all of class, select only clicked element)

定位所有类，仅选择单击的元素(Targeting all of class, select only clicked element)

我昨天发布了一个问题然后将其删除，以为我认为我的代码部分没有任何问题。 但是，经过测试，仍然存在问题。

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

希望你能帮忙！

麦克风

I posted a question yesterday and then deleted it, thinking I had figured that there was nothing wrong with this part of my code. However, after testing there still seems to be an issue.

Within the code below I want $(this) to select only the clicked element, not all of the class that I am targeting. However, the console logs 2, 3, 4, etc... not 1!

Basically I need the class "action" to be added only to the clicked element. Appreciate any help!

$("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; });

I know I could use $(".moveable").on("mousedown", function() {...});, $(this) then targets just the clicked element with the "moveable" class but I need the event to fire on dynamically added elements, hence me binding the event in the way I am. Maybe the way I am doing this is the problem?

I hope you can help!

Mike

最满意答案

我认为你需要的是从其他元素中删除动作类，如下所示。 另请注意缓存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; });

I think what you need is to remove the action class from other elements as below. Also note to cache the jQuery selector so that you don't have to run the selector all the time.

If you are removing the action class, you will need to remove those element's interval also.

$("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; });