Appliquer jQuery événements à tous les éléments de classe?
J'ai le code suivant qui aura permis à un utilisateur exécutant iOS pour déplacer un <div>
avec la classe .drag
autour de la page. Cela fonctionne bien quand il ya un istance de .drag
, mais ne fonctionne pas quand il y a deux instances de celui-ci. Est-il possible d'avoir le code à trouver tous les <div>
's, puis de leur permettre d'être déplaçable?
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'
});
});
OriginalL'auteur Charlie | 2012-09-09
Vous devez vous connecter pour publier un commentaire.
Lorsque vous utilisez
$(selector)[0]
, vous obtenez le première DOM élément qui correspond au sélecteur. Utilisation.each()
au lieu d'ajouter l'écouteur d'événement à tous éléments qui correspondent au sélecteur:var drag = $(this)
au lieu devar drag = this
.OriginalL'auteur João Silva
Oui, c'est possible. Mais vous êtes à l'aide d'un sélecteur jQuery (qui permet de sélectionner et de retour de plusieurs éléments), puis immédiatement à déballer, il renvoie le premier élément. Vous pouvez modifier votre code pour utiliser les fonctions jQuery et tout au long de l'éviter.
Une autre façon de voir les choses:
Comme je l'ai mentionné, vous pouvez également utiliser les fonctions jQuery tout au long de votre code. Les deux exemples que j'ai vu sont les coordonnées x/y de calcul et la liaison des événements.
TypeError: 'undefined' is not a function (evaluating 'drag.addEventListener')
. Vous pouvez voir en direct un exemple ici: codekraken.com/testing/drag/test.html (doit être en cours d'exécution iOS pour qu'il fonctionne). Aussi, pouvez-vous nous donner des précisions sur l'utilisation des fonctions jQuery à la place de ce que j'ai actuellement?Avez-vous essayé @João Silva exemple? il semble correct pour moi.
Oui, ses œuvres. Est-ce que votre exemple ne pas fonctionner car
var drag = $(".drag");
serait attribution de plus d'un élément de la variable?Lui et moi on dire la même chose...je suis juste en expliquant comment les sélecteurs de travail. J'ai ajouté un autre exemple pour clarifier.
Downvoter, des commentaires à ce sujet?
OriginalL'auteur Tim Medora
Tout d'abord, vous déclarez que vous souhaitez uniquement le premier élément à l'aide d'
[0]
.Seconde, vous devriez utiliser du jQuery
on()
méthode. Voici comment je vous vois fonction:bind()
méthode?Désolé, mon erreur - depuis jQuery 1.7 la méthode recommandée est 'on' au lieu de 'lier'. la méthode addEventListener n'a même pas de travail ici, (et ne devraient pas travailler dans la solution marquée comme étant correcte), comme la méthode addEventListener est pour JS Élément, et vous essayez de le lier à un Objet jQuery. Vous pouvez trouver une discussion sur l'utilisation de " on " ici: stackoverflow.com/questions/8996015/...
OriginalL'auteur mhaligowski
C'est probablement évident pour la plupart des développeurs expérimentés, mais pourrait être utile à certains juniors devs qui, comme moi, ont du mal à obtenir jQuery pour s'appliquer à plusieurs éléments.
Aujourd'hui j'ai appris que vous devez vous assurer que vous êtes en train de charger votre script à l'extérieur la div.
J'ai été, à tort, le chargement du script à l'intérieur de le premier élément, et vous demandez-vous pourquoi la fonction jQuery n'était pas l'application à l'autre div plus bas sur la page.
Capture d'écran montrant < script > à l'intérieur de parent < div >
^ Je le faisais mal
OriginalL'auteur Jérémy Chevallier