J'essaie d'obtenir la méthode de mise au point (toucher, souris ou clavier) sur les liens définissant un attribut de données . Le problème est que je Obtenir des résultats n'excédant que la dernière partie de JQuery: et je veux écrire le code entier en javascript plain. J'ai essayé le chemin ci-dessous: mais cela ne fonctionne pas.
Quelqu'un peut-il m'aider s'il vous plaît?
3 Réponses :
Je suggère d'utiliser la méthode QuerySelectorall et d'utiliser pour utiliser la nodéliste
document.querySelectorAll("a").forEach((link) => {
link.addEventListener("focus", function() {
this.setAttribute("data-focus-method", i);
});
link.addEventListener("blur", function() {
this.removeAttribute("data-focus-method");
});
});
Utilise l'utilisation setattribute travail pour définir les attributs de données? J'ai toujours utilisé el.dataset pour le faire.
@Yaakovainspan oui, ça fait
Je ne sais pas pourquoi vous essayez de remplacer la méthode Cela dit, voici quelque chose pour vous rapprocher de votre objectif d'une version de la vanille JS du code. P> La réponse utilise le Opérateur pour convertir la nodéliste que vous obtenez de Lorsqu'il est ciblé, nous ajoutons l'attribut. Lorsque flou, nous supprimons l'attribut. J'ai opté pour SET Attribute et Supprimer l'attribut , mais vous pouvez également utiliser Dataset Si vous le souhaitez. P> Pour déterminer ce que i code> (la méthode) est, j'ai utilisé Laissez et un Opérateur ternaire . P> Je ne sais toujours pas pourquoi vous voulez remplacer la méthode lorsqu'une touche est enfoncée sur le clavier, donc je l'ai laissé cela. Je peux améliorer cela si vous me laissez savoir quel est l'effet souhaité. P> p> i code> à chaque fois qu'une touche est enfoncée sur le clavier. Cependant, je suppose que c'est l'effet souhaité puisque vous ne le mentionnez pas dans votre question. getelementsbytagname code> à un tableau puis TRANCHACH () Pour boucler les éléments de la matrice. Pour chaque article, nous ajoutons deux Événements. Un pour Focus code>, et un pour flou code>. p>
<a href="#">My link 1</a>
<a href="#">My link 2</a>
<a href="#">My link 3</a>
J'ai la solution Ajout:
var w;
for (w = 0; w < r.length; w++) {
r[w].addEventListener("focus", function() {
this.setAttribute("data-focus-method", i);
});
r[w].addEventListener("blur", function() {
this.removeAttribute("data-focus-method");
});
}
Le code est-il ici identique à votre code actuel? Cette ligne apparaît suspect
r = document.getelementsbytagname ("a") [0] lorsque vous mentionnez " sur liens " - c'est-à-dire que votre texte implique plusieurs / tous les liens, mais votre code indique premier lien (qui est un peu étrange en soi). Si vous avez effectivement quelque chose commepour (var iDX dans document.getelementsbytagname ("A")) {var r = document.getelementsbytagname ("A") [IDX] alors c'est votre problème - r aurez Changé au moment où il frappe l'auditeur d'événement, d'où l'utilisation dececi .@ Freedomn-m Le problème est que lorsque je supprimai le
[0] i obtenez le message d'erreur "R.adDeventListener n'est pas une fonction".Votre code fonctionne simplement bien .
@Arthurotaviano c'est parce que
getelementsbytagname () renvoie une nodelle que vous devez itération et appelezaddeventListener sur chaque élément individuelIl ne s'agit pas de Supprimer le
[0] - c'est plus que votre code réel utilise[i] (ou similaire)?Mais à la recherche de nouveau, il semble que vous ayez essayé de remplacer
$ ("a") avecdocument.getelementsbytagname ("a") [0] - ne sont pas équivalents - la version jQuery serait$ ("A: premier") (ou$ ("a"). EQ (0) ) - JQuery enveloppe gentiment la collection pour vous et gère tout dans une belle emballage pratique.@ Freedomn-m c'est faux alors. Désolé, je suis un débutant en JavaScript. J'ai besoin d'obtenir tous les éléments
a dans ma page pour exécuter la fonction de méthode de mise au point.