Okobane Okobane - 1 month ago 17
Javascript Question

Change img src attribute value in loop - jquery

I have a carousel with images which I'd like the src attributes values to be replaced with other data-src attributes values depending on the window width.

<div id="mainCarousel">
<img class="img-carousel" src="img/carousel-main-img2.jpg" data-src="img/carousel-main-datasrc-1.jpg" data-srctwo="img/carousel-main-datasrctwo-1.jpg">
<img class="img-carousel" src="img/carousel-main-img3.jpg" data-src="img/carousel-main-datasrc-2.jpg" data-srctwo="img/carousel-main-datasrctwo-2.jpg">




function carouselImages() {

// set window width in a variable
var winWidth = $(window).width();
// set img DOM element in a variable
var imgCarousel = $('#mainCarousel .img-carousel');
// declare empty variable for img 'data-src' attribute
var dataSrc = $();
// declare empty variable for img 'data-srcTwo' attribute
var dataSrcTwo = $();

//set loop which will iterate on each img DOM element
for(var i=0; i<imgCarousel.length; i++) {
// set first width range condition
if(winWidth > 400 && winWidth < 768) {
// if width matches condition, store the value of each DOM element's 'data-src' attribute in previously declared variable
dataSrc = imgCarousel[i].attr('data-src');
// replace DOM element's 'src' attribute's value with 'data-src' attribute's value
imgCarousel[i].attr('src', dataSrc);
}

// set second width range condition
else if (winWidth >= 768) {
// if width matches condition, store the value of each DOM element's 'data-src' attribute in previously declared variable
dataSrcTwo = imgCarousel[i].attr('data-srcTwo');
// replace DOM element's 'src' attribute's value with 'data-src' attribute's value
imgCarousel[i].attr('src', dataSrcTwo);
}

}

};

$(document).ready(function(){
carouselImages();
});
$(window).resize(function () {
carouselImages();
});


What I want to achieve is that the images src values get replaced with data-src values when the window width is between 401px and 767px, and with data-srctwo values when the window width is >= 768px.

I tried to be as logical as possible when structuring my function. But it just doesn't work. The src attributes values don't change at all neither when reducing the screen and refreshing, nor when directly resizing the browser window. Plus, I get the following error message : "imgCarousel[i].attr is not a function".

Could anybody tell me what's actually wrong with the logic behind my function; And why I get the error message as I don't think you necessarily need to have a function inside a condition.

Answer

var imgCarousel = $('#mainCarousel .img-carousel'); is an array of matched elements. Its only the DOM element not an jquery object. So when looping over it & applying attr it will thrown an error.

You need to convert it to jquery object before applying .attr method on it.

You can refer to the current element by either of the following way

$(imgCarousel[i]).attr('data-src');

or

$(this).attr(//rest of code)
Comments