javascript 将 jQuery 事件应用于所有类元素？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12335859/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Apply jQuery events to all class elements?
提问by Charlie
I have the following code which will allowed a user running iOS to move a <div>with the class .dragaround on the page. This works fine when there is one istance of .drag, but fails to work when there are two instances of it. Is it possible to have the code find all of the <div>'s, then allow them to be draggable?
我有以下代码，它允许运行 iOS 的用户在页面上移动<div>类.drag。这在只有一个.drag实例时工作正常，但在有两个实例时不起作用。是否可以让代码找到所有的<div>'s，然后允许它们可拖动？
var drag = $(".drag")[0];
xPos = drag.offsetWidth / 2;
yPos = drag.offsetHeight / 2;
drag.addEventListener("touchmove", function() {
event.preventDefault();
$(this).css({
'left' : event.targetTouches[0].pageX - xPos + 'px',
'top' : event.targetTouches[0].pageY - yPos + 'px'
});
});
回答by Jo?o Silva
When you use $(selector)[0], you get the firstDOM element that matches the selector. Use .each()instead to add the event listener to allelements that match the selector:
当您使用 时$(selector)[0]，您将获得与选择器匹配的第一个DOM 元素。.each()改为使用将事件侦听器添加到与选择器匹配的所有元素：
$(".drag").each(function () {
var drag = this;
xPos = drag.offsetWidth / 2;
yPos = drag.offsetHeight / 2;
drag.addEventListener("touchmove", function() {
event.preventDefault();
$(this).css({
'left' : event.targetTouches[0].pageX - xPos + 'px',
'top' : event.targetTouches[0].pageY - yPos + 'px'
});
});
});?
回答by Tim Medora
Yes, it's possible. But you are using a jQuery selector (which can select and return multiple elements) and then immediately unwrapping it to return the first element. You can modify your code to use jQuery functions throughout and avoid this.
是的，这是可能的。但是您正在使用 jQuery 选择器（它可以选择并返回多个元素），然后立即展开它以返回第一个元素。您可以修改代码以在整个过程中使用 jQuery 函数并避免这种情况。
// an array of all elements with class "drag"
// each element is wrapped
var drag = $(".drag");
// selects all matching elements, but then references
// the first raw DOM element in the array
var drag = $(".drag")[0];
Another way of looking at it:
另一种看待它的方式：
var matches = $(".drag");
// each() executes a function for each matched element
matches.each(function () {
var drag = this; // raw dom element
// or, wrap to get jQuery object
// var drag = $(this);
});?
As I mentioned, you can also use jQuery functions throughout your code. Two quick examples I see are the x/y coordinate calculation and the event binding.
正如我所提到的，您还可以在整个代码中使用 jQuery 函数。我看到的两个快速示例是 x/y 坐标计算和事件绑定。
回答by mhaligowski
First, you declare that you want only the first element by using [0].
首先，您使用 声明您只需要第一个元素[0]。
Second, you should use jQuery's on()method. Here's how I see you function:
其次，你应该使用jQuery的on()方法。这是我看到你的运作方式：
var drag = $(".drag");
drag.on("touchmove", function(event) {
xPos = $(this).offsetWidth / 2;
yPos = $(this).offsetHeight / 2;
event.preventDefault(); // preventDefault is IE-specific, is it?
$(this).css({
'left' : event.targetTouches[0].pageX - xPos + 'px',
'top' : event.targetTouches[0].pageY - yPos + 'px'
});
});
回答by Jérémy Chevallier
This is probably obvious to most experienced devs, but could be helpful to some junior devs who like myself have had trouble getting jQuery to apply to multiple elements.
这对于大多数有经验的开发人员来说可能是显而易见的，但对于像我这样在让 jQuery 应用于多个元素有困难的一些初级开发人员可能会有所帮助。
Today I learned that you have to make sure you're loading your script outsidethe div itself.
今天我了解到您必须确保在 div 本身之外加载您的脚本。
I was mistakenly loading the script insidethe first element, and wondering why the jQuery function wasn't applying to the other div farther down the page.
我被错误地加载脚本中的第一个元素，并想知道为什么jQuery函数没有被应用到其他分区位于页面下部。
Screenshot showing < script > inside parent < div >^ I was doing it wrong
