I am looking to loop through all the elements with a data-speed attribute and record them. Then loop back though that array on resize to put them back to original values.
I am able to get my data-speed attributes of all elements that contain that data attribute and log them. But now I need to record them, and then add those data-attributes back to the original elements at the original value (in my resize function). Below is my html, along with how I have the JS setup so far:
// 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> The following should do the job:
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>Basically, everything you do here you can do in Vanilla JavaScript too. But, as you have chosen to work with jQuery you should do it consisently and avoid methods like document.querySeletor() and document.getAttribute().
Another point worth noticing might be that the callback functions for jQuery.each() and jQuery.map() require their arguments: (index, element) in the reverse order of the corresponding Array.prototype functions of JavaScript (the order here is (element,index)).