jQuery:如果用户已登录，请添加 atr 并将 css 应用于元素

Question

我有以下可折叠/ Accordion 结帐表格:https://jsfiddle.net/9vjcoLxh/3/

如果用户使用 jQuery 登录，我想以某种方式使第二个面板(“交付选项”)的 attr 和 css 成为条件。此时，面板 2、3 和 4 处于禁用状态，随着表单的填写逐渐可以访问它们。您可以在 jsfiddle 中看到该行为。

仅当用户未登录时才会显示带有登录表单的面板。如果用户已登录，则不会显示该面板。这就造成了一个难题，因为没有这个面板，用户就无法访问第二个面板(“交付选项”)。我希望在用户登录时可以访问该面板，以便他可以浏览表单的其余部分。

我试过这样的事情(我知道这很笨拙，但我之前与 Javascript/jQuery 没有太多关系):

var data = {
    action: 'is_user_logged_in'
};

jQuery.post(ajaxurl, data, function(response) {
    if(response == 'yes') {
        jQuery("#panel-billing-heading").attr("href", "#collapse-billing").removeClass("collapsed").css({
           'background-color' : '#fff',
           'color' : '#000',
           'border' : '0px',
           'cursor' : 'pointer'
        })
        jQuery("#checkout-accordion-billing").css({
            'display' : 'block'
        })
    } else {
        // user is not logged in, show login form here
    }
});

我将其添加到我的 functions.php 文件中:

function ajax_check_user_logged_in() {
    echo is_user_logged_in()?'yes':'no';
    die();
}
add_action('wp_ajax_is_user_logged_in', 'ajax_check_user_logged_in');
add_action('wp_ajax_nopriv_is_user_logged_in', 'ajax_check_user_logged_in');

我怎样才能让它发挥作用？我非常感谢您提供一些意见!

Answer 1

如果您登录到 WordPress，“已登录”类会自动添加到 body 标签中。所以您可以在 jQuery 中轻松检查。我在禁用#panel-billing-heading 的代码部分周围添加了一个“if”语句:

if (! jQuery('body').hasClass('logged-in')) {
  jQuery("#panel-billing-heading").removeAttr("href").css({
   'backgroundColor' : '#EEE',
   'color' : '#ddd',
   'border' : '1px solid #ddd',
   'cursor' : 'default'
 })
}