Question

我有以下代码，允许运行iOS的用户在页面上移动<div>类.drag。当有.drag的一个等值时，这可以正常工作，但当有两个实例时，它无法工作。是否可以让代码找到所有的<div>，然后让它们可以拖动？

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

Answer 1

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

Answer 2

是的，这是可能的。但是您正在使用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坐标计算和事件绑定。

Answer 3

首先，您使用[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'
        });
});

Answer 4

这对于大多数经验丰富的开发人员来说可能是显而易见的，但对于像我一样难以让jQuery应用于多个元素的一些初级开发人员可能会有所帮助。

今天我了解到，您必须确保要在div本身外部中加载脚本。

我错误地在第一个元素内部中加载了脚本，并且想知道为什么jQuery函数没有应用到页面下方的另一个div。

Screenshot showing < script > inside parent < div > ^我做错了

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

4 个答案: