javascript - 识别之前已点击过该链接并更改操作

Question

我有一个链接，单击时使用 .replaceWith 用 .swf 文件的 html 代码填充 div。下面是一个例子:

$().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>" );
});  });

我希望在第一次单击链接时插入 swf html。如果再次单击，我希望 div html 更改为其他内容。例如:

$('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>" );
    }); });

如何创建监听器来确定链接是否已被单击一次，然后删除 .swf html 代码并将其替换为新代码？

我还想也许可以使用 cookies 来检查:

    $('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";
    };
    };
    });

像这样的东西会起作用还是我把它弄得太复杂了？

Answer 1

您可以使用 data 方法存储一个值来查看该元素是否已被单击:

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