jquery，获取上次点击的链接href属性：制作“关注外部链接或不关注”

Question

我正在制作一个小脚本，为所有外部链接添加一类“外部”，然后当有人点击外部链接时，它会显示一个div.question-wrapper，它有一个div.follow和一个div.dontfollow在其中，它还显示您在div.question-wrapper中单击的链接的URL。我唯一的问题是复制链接的href attr点击按钮div.follow。

jquery的：

$(".external").click(function() {
    thisurl = $(this).attr('href')
    $("#question-wrapper").fadeIn('normal')
    $("#follow").attr('href', "($(this).attr('href'))")
        return false;   
    $("#dontfollow").click(function() {
        $("#question-wrapper").fadeOut('normal')
    })
    $("#question-wrapper span").html(
        $(this).attr('href'))
        return false;
    }) 

HTML：

<div id="question-wrapper">
    Would you like to continue on to 
    <span id="url">space where link is</span>?
    <div id="follow">CONTINUE</div>
    <div id="dontfollow">STAY HERE</div>
</div>

Answer 1

您有正确的想法，但div s不能href s，因此我会在a中使用两个#question-wrapper标记，使您的HTML看起来像：< / p>

<div id="question-wrapper">
    Would you like to continue on to 
    <span id="url">space where link is</span><br/>
    <a id="follow">CONTINUE</a><br/>
    <a id="dontfollow" href="#">STAY HERE</a>
</div>

此外，如果您将href放在引号中，那么它将按字面显示，所以

$("#follow").attr('href', "($(this).attr('href'))");

#follow如果是A，则会生成：

<a href="($(this).attr('href'))">blah</a>

此外，您已创建thisurl，因此请使用它。同样使用var，因为没有声明变量变为全局变量（window的属性）：

$("#follow").attr('href', thiurl);

所以整个事情看起来像：

$(function() {                                            // <== DOC ready

    $("#question-wrapper").hide();                        // Hide the QR to begin

    $("a.external").click(function() {    // Click handler for all external links

        var thisurl = $(this).attr('href'),                            // The url
            $qr = $("#question-wrapper");                               // The QR

        $qr.fadeIn('normal');                                      // Show the QR

        $("#follow").attr('href', thisurl);              // Set the URL of FOLLOW

          // Make #url a working link too
        $("#url").html('<a href="' + thisurl + '">' + thisurl + '</a>');

        $("#dontfollow").click(function() {
            $qr.fadeOut('normal');
            return false;
        });

        return false;
    });
});​

Try it out with this jsFiddle