Often I come across this specific pattern.
Could someone please provide me with a canonical method of ensuring that only image1 is displayed once? In example two, it works flawlessly - but the reason behind its success eludes me. Any insights or explanations on this particular scenario would be greatly appreciated, despite having perused closure concepts online :)
Starting off with the initial code:
$(document).ready(function() {
$("#prev, #next").click(function() {
var mainImage = $("#image1");
if (mainImage.css("visibility")=="hidden") {
$(mainImage.css("visibility","visible");
return;
}
var currentNumber = parseInt(mainImage.attr("src").split('gallery/')[1]);
var newNumber = ($(this).attr("id")=="next")?currentNumber+1:currentNumber-1;
var testImage = new Image();
testImage.onload = function() {
var img = $("#image1");
img.attr("src",this.src);
img.css("visibility","visible");
}
testImage.onerror = function() {
$("#image1").css("visibility","hidden");
}
testImage.src = "gallery/" + newNumber + ".jpg";
return false;
});
});
Exploring a closure - why does it work as intended? Is this merely a scoping issue?
$(document).ready(function() {
$("#prev, #next").click(function() {
var mainImage = $("#image1"); // supposed to be local to the click function
if (mainImage.css("visibility") == "hidden") {
$(mainImage.css("visibility", "visible");
return;
}
var currentNumber = parseInt(mainImage.attr("src").split('gallery/')[1]);
var newNumber = ($(this).attr("id") == "next") ? currentNumber + 1 : currentNumber - 1;
var testImage = new Image();
testImage.onload = function() {
mainImage.attr("src", this.src); // how is mainImage accessible here?
mainImage.css("visibility", "visible");
}
testImage.onerror = function() {
mainImage.css("visibility", "hidden"); // how is mainImage accessible here?
}
testImage.src = "gallery/" + newNumber + ".jpg";
return false;
});
});