首页 文章

Cookie if语句无法正常工作

提问于
浏览 次
0

目标

我正在使用carhartl的轻量级cookie插件 . 我正在尝试的是当用户点击通知栏的关闭按钮时设置cookie . 当用户关闭此消息时，该栏应该隐藏，直到时间到期 .

问题

以下是我的脚本 . 因此，当用户点击类 .notification-bar 时，该栏应该隐藏并设置一个cookie . 如果找不到cookie，请显示该栏，直到时间到期 .

不幸的是，下面的代码不起作用我没有收到任何错误消息，但是当我关闭通知栏并刷新页面时，该消息将再次出现 . 之后没有设置cookie .

var notifyBar = $('#notification-bar’)

                if($.cookie('demo_cookie') == null) {
                    notifyBar.css( "display", "block" );
                };

                $(".notification-close").click(function() {
                    notifyBar.css( "display", "none" );
                    $.cookie('demo_cookie', 'Demo Cookie', { expires: '<?php $expiry_date ?>', path: '/'}); 
                });

[更新]

JSFIDDLE：http://jsfiddle.net/cddhez75/8/

当WordPress网站上发布新帖子时，让通知栏工作的代码如下所示：

Functions.php文件

当发布新帖子时，挂钩WordPress的 transition_post_status 函数 .

add_action( 'transition_post_status', function ( $new_status, $old_status, $post ) {
    //Check if our post status then execute our code
    if ( $new_status == 'publish' && $old_status != 'publish' ) {
        if ( get_option( 'new_post_notification' ) !== false ) {
            // The option already exists, so we just update it.
            update_option( 'new_post_notification', $post );

        } else {
            add_option( 'new_post_notification', $post );

        }
    }

}, 10, 3 );

和Header.php文件

<?php 

// Get the new_post_notification which holds the newest post
$notification = get_option( 'new_post_notification' );

if( false != $notification ) {

    //Get the post's gmt date. This can be changed to post_date
    $post_date = strtotime( $notification->post_date_gmt );

    //Get the current gmt time
    $todays_date = current_time( 'timestamp', true );

    //Set the expiry time to two days after the posts is published
    $expiry_date = strtotime('+10 minute', $post_date);


    if( $expiry_date > $todays_date ) { 
        // Display your notification if two days has not been passed
        //echo 'New post published';


    ?>
        <script type="text/javascript">
            $(document).ready(function(){
                var notifyBar = $('#notification-bar');

                if($.cookie('demo_cookie') == null) {
                    notifyBar.css( "display", "block" );
                };

                $(".notification-close").click(function() {
                    notifyBar.css( "display", "none" );
                    $.cookie('demo_cookie', 'Demo Cookie', { expires: '<?php $expiry_date ?>', path: '/'}); 
                                        console.log('hello');

                });


            });

        </script>

        <div id="notification-bar-spacer">
            <div id="notification-bar" class="wpfront-fixed">
                <div class="notification-close">X</div>
                <table border="0" cellspacing="0" cellpadding="0">
                    <tbody>
                        <tr>
                            <td>
                                <div class="wpfront-message">
                                    Geachte leden, er zijn één of meerdere nieuwe berichten toegevoegd. <a href="http://wordpress.devrijheidbussum.nl/wordpress/login/">Ga naar login pagina ></a>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>


    <?php

    }

}
?>
javascript jquery cookies

1 回答

  • 0

    除了错误的近距离报价外，您还有几个小问题：

    • 缺少的是在cookie存在时隐藏 notification-bar 的逻辑 .

    • 似乎 expires 值必须是数字而不是字符串 .

    编辑：片段工具不想与cookie很好地玩，所以请参阅Working Fiddle

    $(function() {
    var notifyBar = $('#notification-bar');
    
    if($.cookie('demo_cookie') == null) {
        notifyBar.css( "display", "block" );
    } else {
        notifyBar.css( "display", "none" );
    }
    
    $(".notification-close").click(function() {
        notifyBar.css( "display", "none" );
        $.cookie('demo_cookie', 'Demo Cookie', { expires: 7, path: '/'}); 
    });
});

    #notification-bar {
    height: 50px;
    width: 200px;
    background-color: blue;
}

    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="notification-bar"></div>
<input type="button" class="notification-close" value="Close" />
    回复于

相关问题