12

ユーザーがいつ閉じるボタンをクリックしたかを記憶する Bootstrap アラート ボックスを作成しようとしています。その情報をCookieに保存する必要があると思います。理想的には、その Cookie はその現在のセッションの間だけ持続し、次に戻ってくるとボックスが再び表示されます。

jQuery-Cookie プラグインを使用しています。にアップロードしました/jquery-cookie-master。プラグインはここにあります。

これは、ここにあるコードに従って、これまでに得たものです。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="/jquery-cookie-master/jquery.cookie.js"></script>
<script>
    function runOnLoad(){
        if($.cookie('alert-box') == null) {
            $.cookie('alert-box', 'open', { expires: 7 });
        } else if($.cookie('alert-box') == 'close') {
            $(".close").hide();
        }

</script>

HTML:

<body onload="runOnLoad()">

<div class="alert alert-info">
  <button type="button" class="close" data-dismiss="alert" href="hideMe.php" onclick="hideMe()">×</button>
  <p>
    <strong>FORUM UPGRADE:</strong> In light of our recent surge in popularity we upgraded our forum and unfortunately lost all the old threads in the process.
  </p>
  <p>
    In an effort to kick-start the forum again we need your help. Sign up now and leave a post (it's free). Once we reach 100 threads every member will receive a special gift.
  </p>
  <p>
    <a href="http://example.com/forum/#/entry/register">
      <strong>Sign up to the forum now</strong>
    </a>.
  </p>
</div>

</body>

残念ながら機能していません。閉じるボタンをクリックすると、そのアクションが記憶されず、ページを更新すると警告ボックスが再び表示されます。

私は何を間違えましたか？

4

1 に答える 1

16

コードの問題

  • コードonload機能では、ユーザーがアラートボックスを閉じたときにのみCookieを設定したいので、奇妙なCookie値を設定しているようです。

  • ボタンにはhref属性があります。これは、無効なhtmlと同様に必要ありません。

解決

アラートボックスの状態を単に非表示にして記憶するには、イベントを閉じるボタンにバインドして、ユーザーがいつ閉じるをクリックしたかを知る必要があります。

jQueryを使用してイベントをバインドするには、次のコードを使用できます。

// When document is ready replaces the need for onload
jQuery(function( $ ){

    // Grab your button (based on your posted html)
    $('.close').click(function( e ){

        // Do not perform default action when button is clicked
        e.preventDefault();

        /* If you just want the cookie for a session don't provide an expires
         Set the path as root, so the cookie will be valid across the whole site */
        $.cookie('alert-box', 'closed', { path: '/' });

    });

});

警告ボックスを非表示にするには、正しいCookie値を確認し、ボックスを非表示にする必要があります。

jQuery(function( $ ){

    // Check if alert has been closed
    if( $.cookie('alert-box') === 'closed' ){

        $('.alert').hide();

    }

    // ... Binding code from above example

});
于 2012-12-04T09:07:47.717 に答える