認識到鏈接已被點擊之前，並更改操作

Question

我有一個鏈接，單擊時使用.replaceWith填充div代碼爲.swf文件的HTML代碼。下面是一個例子：

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

您可以使用數據的方法來存儲一個值，看看是否元素已經被點擊：

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

Answer 2

使用一個數據對象：

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