Wordpress JQuery -保存复选框状态

Question

我正在尝试在Wordpress中使用以下代码：

http://jsfiddle.net/R73vy/

它应该将单击的复选框域的状态保存在cookie中。

你可以在这里看到我的尝试(不起作用)：https://www.docs-templates.com/checkliste/

Javascript已加载(我认为)：https://www.docs-templates.com/wp-content/themes/storefront-child/js/checkox.js?ver=4.9.1

https://www.docs-templates.com/wp-content/themes/storefront-child/js/js.cookie.js?ver=4.9.1

https://www.docs-templates.com/wp-includes/js/jquery/jquery.js?ver=1.12.4

那么，出什么问题了？

Functions.php为：

<?php
/**
 * Theme Name child theme functions and definitions
 */

/*—————————————————————————————————————————*/
/* Include the parent theme style.css
/*—————————————————————————————————————————*/

add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );

}



add_action( 'storefront_header', 'jk_storefront_header_content', 40 );
function jk_storefront_header_content() { ?>
    <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:600" rel="stylesheet"> 
    <link href="https://fonts.googleapis.com/css?family=Roboto:700" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Merriweather:400,400i" rel="stylesheet">


    <?php
}


function sv_change_product_price_display( $price ) {

    $price .= '';
    return $price;
}
add_filter( 'woocommerce_get_price_html', 'sv_change_product_price_display' );
add_filter( 'woocommerce_cart_item_price', 'sv_change_product_price_display' );


function hide_storefront_credit_link( $bool ){
   return false;
}
add_filter( 'storefront_credit_link', 'hide_storefront_credit_link', 10, 1 );

/**
add_filter('woocommerce_login_redirect', 'pro_login_redirect');

function pro_login_redirect( $redirect_to ) {
    $redirect_to = 'https://www.reinzeichnung.online/meine-buecher/?bookId=12';
    return $redirect_to;
}
**/

add_action( 'after_setup_theme', 'remove_pgz_theme_support', 100 );

function remove_pgz_theme_support() { 
remove_theme_support( 'wc-product-gallery-zoom' );
}


add_filter('woocommerce_enable_order_notes_field', '__return_false');


// Hook in
add_filter( 'woocommerce_default_address_fields' , 'custom_override_default_address_fields' );

// Our hooked in function - $address_fields is passed via the filter!

function custom_override_default_address_fields( $address_fields ) {
     $address_fields['address_1']['required'] = true;
     $address_fields['city']['required'] = true;
     $address_fields['postcode']['required'] = true;

     return $address_fields;
}
/**

add_filter( 'woocommerce_product_tabs', 'wcs_woo_remove_reviews_tab', 98 );
function wcs_woo_remove_reviews_tab($tabs) {
unset($tabs['reviews']);
return $tabs;
}
**/


function ah_custom_js_file() {
 // Enqueue a custom JS file with jQuery as a dependency
 wp_enqueue_script('custom-js', get_stylesheet_directory_uri() . '/js/custom.js', array('jquery'), false, false);
}
add_action('wp_enqueue_scripts', 'ah_custom_js_file');


$path = get_stylesheet_directory_uri() .'/js/';
if (!is_admin()) wp_enqueue_script('stickyheader', $path.'stickyheader.js', array('jquery'));

add_post_type_support( 'page', 'excerpt' );



function wpb_adding_scripts() {
 // Enqueue a custom JS file with jQuery as a dependency
 wp_enqueue_script('accordion-1', get_stylesheet_directory_uri() . '/js/accordion.js', false, false);
 wp_enqueue_script('cookie-1', get_stylesheet_directory_uri() . '/js/js_cookie.js', false, false);
 wp_enqueue_script('checkox-1', get_stylesheet_directory_uri() . '/js/checkox.js', false, false);


}
add_action('wp_enqueue_scripts', 'wpb_adding_scripts');




remove_filter('the_content', 'wpautop');

JS文件加载在functions.php的底部：

function wpb_adding_scripts() {
 // Enqueue a custom JS file with jQuery as a dependency
 wp_enqueue_script('accordion-1', get_stylesheet_directory_uri() . '/js/accordion.js', false, false);
 wp_enqueue_script('cookie-1', get_stylesheet_directory_uri() . '/js/js_cookie.js', false, false);
 wp_enqueue_script('checkox-1', get_stylesheet_directory_uri() . '/js/checkox.js', false, false);


}
add_action('wp_enqueue_scripts', 'wpb_adding_scripts');

谢谢!迈克尔

Answer 1

试试这段代码

jQuery(function () {


    jQuery("input.box").each(function() {
        var mycookie = jQuery.cookie(jQuery(this).attr('name'));
        if (mycookie && mycookie == "true") {
        jQuery(this).prop('checked', mycookie);
        }
    });
    jQuery("input.box").change(function() {
        jQuery.cookie(jQuery(this).attr("name"), jQuery(this).prop('checked'), {
        path: '/',
        expires: 365
        });
    });


}());

Answer 2

如果其他人也有同样的问题。cookie的Javascript错误。正确的代码是：

jQuery(document).ready(function() {
    jQuery("input.box").each(function() {
        var mycookie = jQuery.pm_cookie(jQuery(this).attr('name'));
        if (mycookie && mycookie == "true") {
            jQuery(this).prop('checked', mycookie);
        }
    });
    jQuery("input.box").change(function() {
        jQuery.pm_cookie(jQuery(this).attr("name"), jQuery(this).prop('checked'), {
            path: '/',
            expires: 365
        });
    });
});