Brad Bansner
asked on
image swap not working
I have a bunch of images like this:
<img class="gr_mwc_dir" src="art/gr_mwc_dirclosed.
All of my Javascript is attached, although I'm only concerned about the last part of it for this problem. Where I have $('.gr_mwc_dir').click that appears to not be working. I even put an alert in it, that function just isn't getting called at all when I click the image.
I must be doing something stupid, because this seems like it should be very simple! Thank you for looking!
<img class="gr_mwc_dir" src="art/gr_mwc_dirclosed.
All of my Javascript is attached, although I'm only concerned about the last part of it for this problem. Where I have $('.gr_mwc_dir').click that appears to not be working. I even put an alert in it, that function just isn't getting called at all when I click the image.
I must be doing something stupid, because this seems like it should be very simple! Thank you for looking!
<script type="text/javascript">
$(function(){
$('#gr_mwc_editworkoutsicons1').click(function(){
alert('cardio');
});
});
$(function(){
$('#gr_mwc_editworkoutsicons2').click(function(){
alert('strength');
});
});
$(function(){
$('#gr_mwc_editworkoutsicons3').click(function(){
alert('flex');
});
});
$(function(){
$('#gr_mwc_editworkoutsicons4').click(function(){
alert('balance');
});
});
$(function(){
$('#panelleft').load('https://www.myexerciserx.com/mfc_form_ep_desc3-leftpanel.asp?cur_day=5%2F16%2F2011', function(){
$('#panelleft').fadeIn(400);
$('#detailscreen').load('https://www.myexerciserx.com/mfc_form_ep_desc3-leftpanel2.asp?cur_day=5%2F16%2F2011');
});
$('#gr_mwc_arrowleft').click(function(){
if ($('#displayscreens').offset().top==149) {
$('#displayscreens').animate({top: '+=36px'}, 200);
$('#displayscreens').animate({top: '-=36px'}, 200);
} else {
$('#displayscreens').animate({top: '+=414px'}, 800);
}
});
$('#gr_mwc_arrowright').click(function(){
if ($('#displayscreens').offset().top==-2335) {
$('#displayscreens').animate({top: '-=36px'}, 200);
$('#displayscreens').animate({top: '+=36px'}, 200);
} else {
$('#displayscreens').animate({top: '-=414px'}, 800);
}
});
$("#gr_mwc_monthhead2").click(function(){
$("#gr_mwc_monthhead2").attr("src", "https://www.myexerciserx.com/art/gr_mwc_monthhead2.png");
$("#gr_mwc_monthhead3").attr("src", "https://www.myexerciserx.com/art/gr_mwc_monthhead3b.png");
$("#detailscreen").fadeOut(400);
});
$("#gr_mwc_monthhead3").click(function(){
$("#gr_mwc_monthhead2").attr("src", "https://www.myexerciserx.com/art/gr_mwc_monthhead2b.png");
$("#gr_mwc_monthhead3").attr("src", "https://www.myexerciserx.com/art/gr_mwc_monthhead3.png");
$("#detailscreen").fadeIn(400);
});
$('.dayblock').click(function(){
$('.dayblockhl').removeClass('dayblockhl');
$('.gr_mwc_monthblockarrowhl').removeClass('gr_mwc_monthblockarrowhl');
$(this).addClass('dayblockhl');
$(this).children('.gr_mwc_monthblockarrow').addClass('gr_mwc_monthblockarrowhl');
$('#panelleft').fadeOut(200);
$('#panelleft').load('https://www.myexerciserx.com/mfc_form_ep_desc3-leftpanel.asp?cur_day='+$(this).attr('id'), function(){
$('#panelleft').fadeIn(400);
});
});
$('.gr_mwc_dir').click(function(){
if ($(this).attr('src')="https://www.myexerciserx.com/art/gr_mwc_dirclosed.png") {
$(this).attr("src", "https://www.myexerciserx.com/art/gr_mwc_diropen.png");
} else {
$(this).attr("src", "https://www.myexerciserx.com/art/gr_mwc_dirclosed.png");
}
});
});
</script>
Last Comment
ASKER
You are correct, thank you. However, it seems the function isn't triggering at all. I'm not even getting past the click event to make it to that "if" statement.
ASKER CERTIFIED SOLUTION
THIS SOLUTION IS ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
another thought:
When reproducing your script on my computer, it didn't work in the firstplace. The click method wasn't triggered, just as you said. It turned out that i misspelled the classname of my image. But i'm sure you will have checked spelling more than a hundred times :-)
When reproducing your script on my computer, it didn't work in the firstplace. The click method wasn't triggered, just as you said. It turned out that i misspelled the classname of my image. But i'm sure you will have checked spelling more than a hundred times :-)
ASKER
Ah, you are right. The images are created as a result of an AJAX (.load) command. That could be the problem. But I am waiting for all the content to load before clicking. Even if that is the case, would the script not "see" the images?
I'm not familiar with live-function, though.
I'm not familiar with live-function, though.
ASKER
I moved the script to the page that is AJAX loaded, now it works. Thanks!
No, sadly your script can't see your images before they are created. jQuery.live() can. The purpose of this function is exactly to bind events to elements before they exist. (see http://api.jquery.com/live/)
$('.gr_mwc_dir').live('click', function(){
if ($(this).attr('src')=="https://www.myexerciserx.com/art/gr_mwc_dirclosed.png") {
$(this).attr("src", "https://www.myexerciserx.com/art/gr_mwc_diropen.png");
} else {
$(this).attr("src", "https://www.myexerciserx.com/art/gr_mwc_dirclosed.png");
}
});
JavaScript
JavaScript is a dynamic, object-based language commonly used for client-side scripting in web browsers. Recently, server side JavaScript frameworks have also emerged. JavaScript runs on nearly every operating system and in almost every mainstream web browser.
127K
Questions
--
Followers
--
Top Experts
Get a personalized solution from industry experts
TRUSTED BY
there is an "=" missing in this line:
if ($(this).attr('src')="https://www.myexerciserx.com/art/gr_mwc_dirclosed.png") {
it should read
if ($(this).attr('src')=="https://www.myexerciserx.com/art/gr_mwc_dirclosed.png") {