将jQuery事件应用于所有类元素？

我有以下代码，它将允许运行iOS的用户在页面上移动<div>以及类.drag。当有一个错误.drag时可以正常工作，但当它有两个实例时失败。是否可以让代码找到所有的<div>，然后让它们可拖动？将jQuery事件应用于所有类元素？

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' 
    }); 
});

来源

2012-09-09 Charlie

当您使用$(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' 
     }); 
    }); 
});

来源

2012-09-09 01:36:47

是的，这是可能的。但是你正在使用一个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];

看它的另一种方式：

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); 
});

正如我提到的，你也可以使用jQuery的功能在你的代码。我看到的两个简单例子是x/y坐标计算和事件绑定。

来源

2012-09-09 01:36:32

我收到以下错误，当我这样做：'类型错误：“未定义”不是（评估“drag.addEventListener”）'的功能。你可以在这里查看一个生动的例子：http://codekraken.com/testing/drag/test.html（必须运行iOS才能运行）。另外，你能否详细说明使用jQuery函数而不是我目前拥有的功能？ – Charlie

你有没有尝试@JoãoSilva的例子？它看起来对我是正确的。 –

是的，他的作品。你的例子不工作，因为'var drag = $（“。drag”）;'会将多个元素分配给变量？ – Charlie

首先，声明你想只用[0]的第一要素。

其次，您应该使用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' 
     }); 
});

来源

2012-09-09 01:47:35 mhaligowski

使用bind（）方法有什么好处？ – Charlie

对不起，我的错误 - 因为jQuery 1.7首选方法是'on'而不是'bind'。 addEventListener甚至不会在这里工作（并且两者都不应该在标记为正确的解决方案中工作），因为addEventListener用于JS元素，并且您试图将其绑定到jQuery对象。你可以在这里找到关于使用'on'的讨论：http://stackoverflow.com/questions/8996015/jquery-on-vs-javascript-addeventlistener – mhaligowski

将jQuery事件应用于所有类元素？

回答

相关问题