1

jquery を使用して次のアクションを作成しようとしています。ユーザーがリンクをクリックすると、mainContent div が非表示になり、exitSite メッセージが表示されます。ユーザーには、メイン コンテンツに戻るか、続行してサイトを離れるかの 2 つの選択肢があります。

現在の問題: サイトを離れるリンクをクリックしても、何も起こりません。

これが私がこれまでに持っているコードです:

JQuery:

$(function(){

if($('div#exitSite'))
{
    var mydomain$ = location.hostname;
    var links = $('a').each(function()
    {
        if((this.href.indexOf("mySiteDomain")==-1) && (this.href.indexOf(mydomain$)==-1) && (this.href.indexOf("javascr")==-1))
            $(this).addClass('exit');
    });

    /*Off site links.*/     
    $('a.exit').live('click', function (e) {
        e.preventDefault(); //stop the click from going through.
        var page = $(this).attr("href") //get destination page
        var pagetitle = $(this).attr("title")

        $('#mainContent').hide(); //hide main content window
        $('#mainContent').show(); //show main content window

        $('#exitSiteClose').click(function() { 
            $('#exitSite').hide();
            $('#mainContent').show();
            return false
            }); // end click #exitSiteClose

        $('#exitSiteContinue').click(function() {
            window.location=page
            //if user selects the continue button, then pass in the destination page from link.
            }); // end click #exitSiteContinue      
    });// end click a.exit  
}
});

html:

サイトを離れるリンク: クリックして stackoverflow.com

出口サイト div:

<div id="exitSite">
<h2>Hello!</h2>
<p><strong>You are leaving this website</strong></p>
    <div class="buttonContainer">
    <a href="#" id="exitSiteClose" class="btn-gray">Cancel</a>
    <a href="#" id="exitSiteContinue" class="btn-blue">Continue</a>
</div><!-- /.buttonContainer -->
</div><!-- /#exitSite -->
4

2 に答える 2

0

コードに基本的なタイプミスがあります。#exitSitedivをまったく表示していません：

$('#mainContent').hide(); //hide main content window
$('#mainContent').show(); //show main content window

する必要があります：

$('#mainContent').hide(); //hide main content window
$('#exitSite').show(); //show exit confirmation window

デモ： http： //jsfiddle.net/jtbowden/fhFxU/1/

デバッグするためconsole.log("debug")に、クリックハンドラーの内部を使用し、FireBugでクリックハンドラーが呼び出されているかどうかを確認しました。次に、関数を精神的にステップスルーして、何が起こるかを確認しました。その時、あなたが出口の確認を決して見せなかったことに気づきました。

補足として、ハンドラーの変数定義の後にいくつかのセミコロンがありません。

于 2012-05-01T18:22:58.257 に答える
0

単純に JavaScript を使用できますconfirm()。スタイリッシュではありませんが、やりたいことを実現するための最も普遍的な方法です。

$('a[href^="http://"]').on('click', function(e) { // apply to all external URLs
    return window.confirm('Are you sure you want to leave this site?');
});

大まかに言えば、return false;クリック ハンドラーからの JavaScript 関数はそのクリックをキャンセルし、クリックのreturn true;続行を許可します。

邪魔にならず、より一般的なアプローチは、target="_blank"外部リンクに追加することです。これにより、そのリンクが新しいタブ/ウィンドウで開き、サイトは別のタブで開いたままになります。

于 2012-05-01T18:17:01.400 に答える