0
255
VistasCómo obtener this.id en un para cada función (Vanilla JS)
Estoy creando una función en la que se verifica la entrada en las cargas de la página, tiene una identificación única creada por Shopify, así que obtuve un código en jquery que funciona bien, pero estoy tratando de que sea javascript simple (Vanilla) ¿alguien puede guiar? yo :)
versión JQUERY
(function() {
$("#variantRadios input:checked").each(function() {
console.log(this.id + " is checked")
});
})();
Aquí está el código Vanilla JS:
(function () {
const checkVariants = document.querySelectorAll("#variantRadios input:checked");
checkVariants.forEach((checkVariant) => {
console.log(this.id + " is checked")
});
})();
3 Respuestas
Responde la pregunta0
La forma () => (llamada "función de flecha") evita que el valor de this cambie. Entonces, no cambia para convertirse en cada elemento. Consulte forEach docs , arrow function docs y function binding (cambiando this )
Sin embargo, no es necesario meterse con this de todos modos. forEach pasa tres argumentos (puede usar cero, uno, dos o los tres), que son: el elemento, el índice y la lista completa.
Una vez más, consulte los documentos de forEach .
Ejemplo:
(function () {
const checkVariants = document.querySelectorAll("#variantRadios input:checked");
checkVariants.forEach(
// can also be just `(checkVariant)` as needed
(checkVariant, index, allCheckVariants) => {
console.log(checkVariant.id + " is checked")
});
})();
0
Usa lo que se pasa al foreach :
(function () {
const checkVariants = document.querySelectorAll("#variantRadios input:checked");
checkVariants.forEach((checkVariant) => {
console.log(checkVariant.id + " is checked")
});
})();
0
Obtenga la identificación del elemento por propiedad de identificación y obtenga si está seleccionada por la propiedad marcada de un elemento en el método forEach
(function () {
const checkVariants = document.querySelectorAll('#variantRadios input:checked');
checkVariants.forEach((checkVariant) => {
console.log(`Id = ${checkVariant.id}, is checked = ${checkVariant.checked}`);
});
})();