function in function requires two clicks instead of one?
I am learning Javascript and Jquery. I tried the iFlip plug in for jquery and it worked. Then I tried to put it in another function and it required two clicks to switch the images. I think I will use the toggle function but was wondering what was going on as I will probably run across it again. I think I have included all the relevent code below.
Thank you.
maddogandnoriko
-
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="jquery.js"></script>
<script>
jQuery.fn.iflip = function( a, b ) {
$(this).click(function() {
curr = $(this).attr('src');
if( curr == a ) {
$(this).attr('src', b);
} else if( curr == b ) {
$(this).attr('src', a);
}
});
}</script>
<script>
$(document).ready(function(){
// requires only 1 click
$(".tree").iflip('plus.png','close.png')
//requires 2 clicks
$(".markasread").click(function() {
$(".markasread").iflip('plus.png','close.png');
});
});
</script>
</head>
<body>
Works with 1 click<br>
<img src="plus.png" class="tree" /><br><br>
Requires 2 clicks<br>
<img src="plus.png" class="markasread" /><br>
</body>
</html>
JAVASCRIPT CODE:
-
<script type="text/javascript">
$(document).ready(function()
{
$(".markasread").click(function() {
$(this).fadeTo("fast", Math.random());
$(".tree").iflip('images/buttons/plus.png','images/buttons/close.png')
});
});
</script>
HTML CODE:
-