If condition within JQuery click() function requires 2 clicks to fire, but anything outside the if block will fire on first click

Question

I am learning JQuery, and something weird is happening when I put an if condition into the click() function. If I put an alert in right before the if, the alert is fired on the first click, but the if will take 2 to get going. Once the if fires, it only takes one click after that until the page is refreshed. The if basically checks to see what source (out of 2) the image currently is, and swaps it to the other, every time the image is clicked. Can someone tell me why this is happening?

Code:

(HTML)

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<!--<script type="text/javascript" src="js/index.js"></script>-->
<script src="jquery/jq.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<div id="grid">
    <div id="top">
        <img src="./images/me.jpg" id="1" class="pic1" onClick="flip(1)">
        <img src="./images/me.jpg" id="2" class="pic1" onClick="flip(2)">
        <img src="./images/me.jpg" id="3" class="pic1" onClick="flip(3)">
    </div>
    <div id="mid">
        <img src="./images/me.jpg" id="4" class="pic2" onClick="flip(4)">
        <img src="./images/me.jpg" id="5" class="pic2" onClick="flip(5)">
        <img src="./images/me.jpg" id="6" class="pic2" onClick="flip(6)">
    </div>
    <div id="bottom">
        <img src="./images/me.jpg" id="7" class="pic3" onClick="flip(7)">
        <img src="./images/me.jpg" id="8" class="pic3" onClick="flip(8)">
        <img src="./images/me.jpg" id="9" class="pic3" onClick="flip(9)">
    </div>
</div>

(JQuery)

/* * Jquery functions **********************************************/

var source = "file:///Users/Matt/Documents/Test_Web/images/me.jpg";
var source1 = "file:///Users/Matt/Documents/Test_Web/images/me1.jpg";
$(document).ready(function() {
    $("#1").click(function(){
        if($(this).attr('src') == source){
            $(this).attr('src',source1);
        }
        else
        {
            $(this).attr('src',source);
        }
    });
    $("#2").click(function(){
        if($(this).attr('src') == source){
            $(this).attr('src',source1);
        }
        else
        {
            $(this).attr('src',source);
        }
    });
    $("#3").click(function(){
        if($(this).attr('src') == source){
            $(this).attr('src',source1);
        }
        else
        {
            $(this).attr('src',source);
        }
    });
    $("#4").click(function(){
        if($(this).attr('src') == source){
            $(this).attr('src',source1);
        }
        else
        {
            $(this).attr('src',source);
        }
    });
    $("#5").click(function(){
        if($(this).attr('src') == source){
            $(this).attr('src',source1);
        }
        else
        {
            $(this).attr('src',source);
        }
    });
    $("#6").click(function(){
        if($(this).attr('src') == source){
            $(this).attr('src',source1);
        }
        else
        {
            $(this).attr('src',source);
        }
    });
    $("#7").click(function(){
        if($(this).attr('src') == source){
            $(this).attr('src',source1);
        }
        else
        {
            $(this).attr('src',source);
        }
    });
    $("#8").click(function(){
        if($(this).attr('src') == source){
            $(this).attr('src',source1);
        }
        else
        {
            $(this).attr('src',source);
        }
    });
    $("#9").click(function(){
        if($(this).attr('src') == source){
            $(this).attr('src',source1);
        }
        else
        {
            $(this).attr('src',source);
        }
    });
});

If you're using the jQuery `.click()` handler, then there's no need to also have an inline `onClick` attribute. — Sparky, Aug 22 '13 at 03:30

score 0 · Accepted Answer · answered Aug 22 '13 at 03:24

0

You are checking the src attribute value, when you click for the first time src == './images/me.jpg' but you are checking it against the full path.

Try

var source = "./images/me.jpg";
var source1 = "./images/me1.jpg";

answered Aug 22 '13 at 03:24

Arun P Johny

365,836
60
503
504

If condition within JQuery click() function requires 2 clicks to fire, but anything outside the if block will fire on first click

1 Answers1