Estoy buscando recorrer todos los elementos con un atributo de velocidad de datos y registrarlos. Luego, vuelva a recorrer esa matriz al cambiar el tamaño para devolverlos a los valores originales.
Puedo obtener mis atributos de velocidad de datos de todos los elementos que contienen ese atributo de datos y registrarlos. Pero ahora necesito registrarlos y luego agregar esos atributos de datos a los elementos originales en el valor original (en mi función de cambio de tamaño). A continuación se muestra mi html, junto con cómo tengo la configuración de JS hasta ahora:
// get all data-speed numbers and log them const el = document.querySelector('.smootherReset768'); var dataAttribute = el.getAttribute('data-speed'); $('.smootherReset768[data-speed]').each(function(){ console.log($(this).data('speed')) }); //put the values into my resize function $(window).resize(function (){ var mq = window.matchMedia( "(max-width: 768px)" ); if (mq.matches) { // I can change all data-speed attributes here easily } else { // add code to return each element to it's original data-speed } }).resize(); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="col-2 smootherReset768" data-speed=".8"><img src="https://assets.codepen.io/181080/home-3-900x900.jpg"/></div> <div class="col-2 smootherReset768" data-speed="1.2"><img src="https://assets.codepen.io/181080/home-2-900x900.jpg"/></div>Lo siguiente debería hacer el trabajo:
const el = $('.smootherReset768'), factors = [.001, .002], // arbitrary factors for smaller windows --> use GSAP instead!! speeds = el.map((i, e) => $(e).data('speed')).get(); // collect original values // assign speeds according to window size: $(window).resize(function() { const smallWin = window.matchMedia("(max-width: 768px)").matches el.each((i, e) => $(e).data("speed", smallWin ? factors[i] * window.innerWidth // small window: calculated speeds : speeds[i])); // large window: original speeds console.log(smallWin, el.map((i, e) => $(e).data("speed")).get().join(",")) }).resize() img { height: 100px } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="col-2 smootherReset768" data-speed=".8"><img src="https://assets.codepen.io/181080/home-3-900x900.jpg" /></div> <div class="col-2 smootherReset768" data-speed="1.2"><img src="https://assets.codepen.io/181080/home-2-900x900.jpg" /></div> Básicamente, todo lo que haces aquí también lo puedes hacer en Vanilla JavaScript. Pero, como ha elegido trabajar con jQuery, debe hacerlo de manera consistente y evitar métodos como document.querySeletor() y document.getAttribute() .
Otro punto que vale la pena notar podría ser que las funciones de devolución de llamada para jQuery.each() y jQuery.map() requieren sus argumentos: (index, element) en el orden inverso de las funciones Array.prototype correspondientes de JavaScript (el orden aquí es (element,index) ).