If else statement not reaching the else part
<p>So I'm making a image-toggling function that can toggle between two images. More specifically, it toggles the background images of a div. </p>

<p>I'm  using the jquery .data() function as a counter where one = first image and two = toggled image.</p>

<p>Here's the algorithm I'm using:</p>

<ol>
<li>click button to start function.</li>
<li>When I click on the div, if the data is equal to "one", replace image and set data to "two".</li>
<li>When I click the image again, set the image back to the original image and set data equal to "one" so that the function can repeat itself.</li>
</ol>

<p>It seems to replace the image on the first try, as in the first "if", but it doesn't replace the image again on the second try (the else part). It seems to never reach the else part, even though the first if should return false and then go to the else.</p>

<p>Any help will be appreciated. Also, I know there is a .toggle() function and other image-toggling methods, but I must use this one because this is only a small, edited chunk of a larger program.</p>

<p>Here's the code:</p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
    &lt;head&gt;
        &lt;script src="jquery.js"&gt;&lt;/script&gt;
        &lt;link rel="stylesheet" type="text/css" href="mouseovertestlayout.css" /&gt;
        &lt;script&gt;
        function startEdit()
        {     
            $("div").click(function () 
            {                           

                if (($(this).data('kangaroo')) == "one")
                {
                    $(this).css('background-image', "url(image2.png)");
                    $(this).data('kangaroo',"two"); 
                }
                else
                {
                    (this).css('background-image', "url(image1.png)");                  
                    $(this).data('kangaroo',"one");
                }               
            });
        }
        &lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;div class="container"  data-kangaroo="one" &gt;&lt;/div&gt;
        &lt;button  onclick="startEdit()"&gt; &lt;/button&gt; 
    &lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>Here's my .css</p>

<pre><code>.container
{
    width: 20px;
    height: 20px;
    line-height: 0;
    border-style:solid;
    border-width:1px;
    border-color:red;
    padding: 20px;
    background-repeat:no-repeat;    
    background-image:url('image1.png');
}
</code></pre>
