recognise that link has been clicked before and change action

Question

I have a link that when clicked uses .replaceWith to fill a div with html code for a .swf file. Below is an example:

$().ready(function() {
$('a.roots').click(function() {
    $('#flashcontent').replaceWith( "<div id=\"flashcontent\">" +
              "<object classid=\"clsid:D27CDB6E-AE6D-11cf-96B8-444553540000\" width=\"463\" height=\"490\" id=\"FlashID1\" title=\"Liberty Creative Solutions roots\">" +
                "<param name=\"movie\" value=\"flash/roots.swf\" />" +
                "<param name=\"quality\" value=\"high\" />" +
                "<param name=\"wmode\" value=\"opaque\" />" +
                "<param name=\"BGCOLOR\" value=\"#394A59\" />" +
                "<param name=\"swfversion\" value=\"6.0.65.0\" />" +                   
                "<param name=\"expressinstall\" value=\"scripts/expressInstall.swf\" />" +                    
                "<object type=\"application/x-shockwave-flash\" data=\"flash/roots.swf\" width=\"463\" height=\"490\">" +
                 "<param name=\"quality\" value=\"high\" />" +
                  "<param name=\"wmode\" value=\"opaque\" />" +
                  "<param name=\"BGCOLOR\" value=\"#394A59\" />" +
                  "<param name=\"swfversion\" value=\"6.0.65.0\" />" +
                  "<param name=\"expressinstall\" value=\"scripts/expressInstall.swf\" />" +
                 "<div>" +
                    "<h4>Content on this page requires a newer version of Adobe Flash Player.</h4>" +
                    "<p>" + "<a href=\"http://www.adobe.com/go/getflashplayer\">" +"<img src=\"http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif\" alt=\"Get Adobe Flash player\" width=\"112\" height=\"33\" />" + "</a>" + "</p>" +
                  "</div>" +
                 "</object>" +
                "</object>" +
          "</div>" );
});  });

I want the swf html inserted the first time the link is clicked. If it is clicked again I want the div html changed to something else. For example:

$('a.roots).click(function() {
    $('#flashcontent').replaceWith( "<div id=\"flashcontent\">" +
              "<a href=\"#\" onmouseout=\"MM_swapImgRestore()\" onmouseover=\"MM_swapImage('Liberty Creative Solutions - Roots','','images/nf_roots_over.jpg',1)\">" + "<img src=\"images/nf_roots.jpg\" name=\"Liberty Creative Solutions - Roots\" width=\"463\" height=\"488\" border=\"0\" id=\"Liberty Creative Solutions - Roots\" />" +"</a>" +
          "</div>" );
    }); });

How do I create a listener to determine if the link has been clicked once and have it then remove the .swf html code and replace it with the new code?

I also thought maybe using cookies to check:

    $('a.roots').click(function() {
    if($.cookie('rootsclicked') != null) {

        $('#flashcontent').replaceWith( "<a href=\"#\" onmouseout=\"MM_swapImgRestore()\" onmouseover=\"MM_swapImage('Liberty Creative Solutions - Roots','','images/nf_roots_over.jpg',1)\">" + "<img src=\"images/nf_roots.jpg\" name=\"Liberty Creative Solutions - Roots\" width=\"463\" height=\"488\" border=\"0\" id=\"Liberty Creative Solutions - Roots\" />" + "</a>" ); 
        }

    else {
        $('#flashcontent').replaceWith( "<div id=\"flashcontent\">" +
              "<object classid=\"clsid:D27CDB6E-AE6D-11cf-96B8-444553540000\" width=\"463\" height=\"490\" id=\"FlashID1\" title=\"Liberty Creative Solutions roots\">" +
                "<param name=\"movie\" value=\"flash/roots.swf\" />" +
                "<param name=\"quality\" value=\"high\" />" +
                "<param name=\"wmode\" value=\"opaque\" />" +
                "<param name=\"BGCOLOR\" value=\"#394A59\" />" +
                "<param name=\"swfversion\" value=\"6.0.65.0\" />" +                   
                "<param name=\"expressinstall\" value=\"scripts/expressInstall.swf\" />" +                    
                "<object type=\"application/x-shockwave-flash\" data=\"flash/roots.swf\" width=\"463\" height=\"490\">" +
                 "<param name=\"quality\" value=\"high\" />" +
                  "<param name=\"wmode\" value=\"opaque\" />" +
                  "<param name=\"BGCOLOR\" value=\"#394A59\" />" +
                  "<param name=\"swfversion\" value=\"6.0.65.0\" />" +
                  "<param name=\"expressinstall\" value=\"scripts/expressInstall.swf\" />" +
                 "<div>" +
                    "<h4>Content on this page requires a newer version of Adobe Flash Player.</h4>" +
                    "<p>" + "<a href=\"http://www.adobe.com/go/getflashplayer\">" +"<img src=\"http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif\" alt=\"Get Adobe Flash player\" width=\"112\" height=\"33\" />" + "</a>" + "</p>" +
                  "</div>" +
                 "</object>" +
                "</object>" +
          "</div>" );
        //and set a cookie named "rootsclicked"
        setcookie();

    function setCookie(){
        document.cookie = 'cookieName=rootsclicked'; expires="1/01/2015 00:00:00";
    };
    };
    });

Would something like this work or am I making it too complicated?

Answer 1

Use a data object:

$('a.roots').click(function() 
{
    if($(this).data('clicked') === true)
    {
        // do something else
    }
    else
    {
        $(this).data('clicked',true);
        // do normal thing
    }
});

Answer 2

You can use data method to store a value to see if the element was already clicked:

$(function() { 
    $('a.roots').click(function() {     
        var alreadyDone = ($(this).data("clicked") == "1");
        if(alreadyDone){
            $('#flashcontent').replaceWith("<WITH-OTHER-CONTENT>");
        } else {
            $(this).data("clicked", "1") ;
            $('#flashcontent').replaceWith("<WITH-SOME-CONTENT>");
        }
});