0

So I'm making a image-toggling function that can toggle between two images. More specifically, it toggles the background images of a div.

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

Here's the algorithm I'm using:

  1. click button to start function.
  2. When I click on the div, if the data is equal to "one", replace image and set data to "two".
  3. 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.

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.

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.

Here's the code:

<!DOCTYPE html>
<html>
    <head>
        <script src="jquery.js"></script>
        <link rel="stylesheet" type="text/css" href="mouseovertestlayout.css" />
        <script>
        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");
                }               
            });
        }
        </script>
    </head>
    <body>
        <div class="container"  data-kangaroo="one" ></div>
        <button  onclick="startEdit()"> </button> 
    </body>
</html>

Here's my .css

.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');
}
2
  • Please indent your code properly. It makes syntax errors much easier to spot. Sep 19, 2012 at 6:20
  • Now that you have your answer (if it is indeed correct) that the error console would have indicated, then please delete this post .. it is far too localized.
    – user166390
    Sep 19, 2012 at 6:29

4 Answers 4

4

You have a typo in your "else" first line is the $ missing at (this)

2
  • omfg I am so stupid. Thanks for catching that, it solved the issue. love you man.
    – r1nzler
    Sep 19, 2012 at 6:19
  • 3
    If you'd use some kind of JavaScript debugger, the error would be printed to console. I suggest you learn to debug it: netmagazine.com/tutorials/javascript-debugging-beginners Not the best resource, but should get you started. Sep 19, 2012 at 6:26
1

You are missing a $ in else clause.

Fixed:

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");
           }               
    });
}
0

Try like this

if (($(this).attr("data-kangaroo")) == "one")  //Here is the edit
{
       $(this).css('background-image', "url(image2.png)");

        $(this).data('kangaroo',"two");

    }
else
    {
        $(this).css('background-image', "url(image1.png)");     //Here put "$" before (this)             
        $(this).data('kangaroo',"one");
    }  
0

What you want to do can be done much shorter if you use a class and toggleClass.

Demo: http://jsbin.com/anazoq/1/edit

HTML:

<div class="container"></div>
<button>Toggle</button>

CSS:

div {
    ...
    background: url(image1.png) no-repeat;
}
.switch {
    background-image: url(image2.png);
}

JavaScript:

$('button').click(function() {
    $('div').toggleClass('switch');
});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.