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

您可以使用数据方法存储值以查看是否已单击该元素：

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

认识到之前点击了链接并更改了操作

2 个答案: