I've tried to setup an array, but when i use console.log(array_name), it prints the number of the counter (x), instead of printing the path of the image.
The undefined presents itself once I tried to use console.log(img[x]) to check if the content of the variable, it's the source of the image.
But since img doesn't work either, I don't have any clue of what is going on.
$(window).on('load', function(){
var x = 0;
var img = [];
$(".gallery_img").each(function(img){
var image = new Image();
image.src = $(this).attr("src");
x = x + 1;
img[x] = image.src;
console.log(img);
console.log($(this).attr("src"));
I'm pretty new to jquery and javascript, so I'd be very grateful for some specific explanation and not just solution. I hope I've been specific enough, and not a duplicate
-
what do you get when you log "image" and "image.src"..? I hope it is "undefined"..?Nomesh DeSilva– Nomesh DeSilva2015年09月16日 03:01:52 +00:00Commented Sep 16, 2015 at 3:01
-
@Nomesh DeSilva for the image one i get: <img src="lavori/car_wip.png"> instead for the image.src: "file:///X:/portfolio/lavori/car_wip.png" which is the same of $(this).attr("src"); of courseZeus– Zeus2015年09月16日 03:06:57 +00:00Commented Sep 16, 2015 at 3:06
-
Where's the rest of the function? You're missing the last half of it.Alexis Tyler– Alexis Tyler2015年09月16日 03:13:37 +00:00Commented Sep 16, 2015 at 3:13
3 Answers 3
try to rename your array variable var img = []; to something like var imgs = [];
because you're using the same variable in your function here:
$(".gallery_img").each(function(img)..
Added from @guest271314 's comment.
The reason why it's printing the count instead of the path because the first parameter within .each(index, element) is index of element within collection of elements
3 Comments
window.varname to address it that you're using the global var inside that function.. but to be safe, use different variable name . Access overridden global variable inside a function .each(index, element) is index of element within collection of elementsYou're incrementing your array before it has a chance to add an image to index 0.
$(window).on('load', function(){
var x = 0;
var img = [];
$(".gallery_img").each(function(img){
var image = new Image();
image.src = $(this).attr("src");
x = x + 1; //<- x becomes 1
img[x] = image.src; //<- img[0] is undefined as img[1] is where the index began.
console.log(img);
console.log($(this).attr("src"));
Try changing your code to this.
$(window).on('load', function(){
var x = 0;
var img = [];
$(".gallery_img").each(function(img){
var image = new Image();
image.src = $(this).attr("src");
img[x++] = image.src; //this will increment x after the value x is used.
console.log(img);
console.log($(this).attr("src"));
Comments
Well, while you think you passing your declared array to the anonymous function
in fact you defining new local variable img with this code:
.each(function(img){}) that only can be seen inside this new anonymous function
Because this function is a callback that should have input parameters, that will be passed by each() function: jQuery.each( array, callback )
Now what you did, you have defined your array img in scope of function:
$(window).on('load', function(){..});
And then defined one more variable as input parameter that will be used inside this function scope:
$(".gallery_img").each(function(img){..});
I guess you was trying to pass this variable to this function, but this is unnecessary, since you already declared it in more wider scope and this variable already available in function scope.
Truth about javascript variable scopes
When you defined this variable as a callback function parameter, you acquire your new local variable img that gets index of the match as a value and your array img become unavailable inside this function.
So what you had to do actually:
$(window).on('load', function(){
var x = 0;
var img = [];
$(".gallery_img").each(function(ind, val){
var image = new Image();
image.src = $(this).attr("src");
// Unnecessary, we already have index - ind, unless you use some filtering.
// So you could get rid of x variable and use ind instead, like img[ind] = image.src
x = x + 1; //<- x becomes 1
img[x] = image.src; //<- img[0] is undefined as img[1] is where the index began.
console.log(img);
console.log($(this).attr("src"));
Also I advice you to get used to jsfiddle to setup your sample code, that will help you to debug your code and us to help with your actual sample.