jQueryの：ユーザーがログインしている場合は、ATRを追加＆要素

Question

私は、次の折りたたみ式/アコーディオンチェックアウトフォーム持っているためにCSSを適用します。私は何とか第二パネルのATTRとCSSをしたいと思いhttps://jsfiddle.net/9vjcoLxh/3/

を（「配達オプション）は、ユーザーがjQueryを使用してログインしている場合に条件付きです。この時点で、パネル2,3、および4は無効になり、フォームが入力されると徐々にアクセス可能になります。jsfiddleで動作を確認できます。

ログインフォームのパネルは、ユーザーがログインしていない場合にのみ表示されます。ユーザーがログインしている場合、パネルは表示されません。このパネルがなければ、ユーザーは2番目のパネルにアクセスできなくなるため、ジレンマが発生します（「配信オプション」）。ユーザーがログインしているときにパネルにアクセスして、フォームの残りの部分をナビゲートできるようにしたい。

私は（私が知っている、非常に不器用な、しかし、私は前に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

OK、私は解決策自分で作ってみた：私は、ステートメントが＃パネル課金-見出しを無効にし、あなたのコードの一部の周りに「場合」を追加しました。それはかなりではありませんが、私が欲しいものをやっていて、すばらしく働いています。

<?php 
    if (!is_user_logged_in()): ?> 
<script> 
jQuery("#panel-delivery-heading").removeAttr("href").css({ 
    'backgroundColor' : '#EEE', 
    'color' : '#ddd', 
    'border' : '1px solid #ddd', 
    'cursor' : 'default' 
}) 

     jQuery("#panel-billing-heading").removeAttr("href").css({ 
    'backgroundColor' : '#EEE', 
    'color' : '#ddd', 
    'border' : '1px solid #ddd', 
    'cursor' : 'default' 
}) 
     jQuery("#checkout-accordion-billing").css({ 
    'display' : 'none' 
}) 

     jQuery("#panel-payment-heading").removeAttr("href").css({ 
    'background-color' : '#EEE', 
    'color' : '#ddd', 
    'border' : '1px solid #ddd', 
    'cursor' : 'default' 
}) 
     jQuery("#place_order").prop("disabled", true).css({ 
    'background-color' : '#f4bbda', 
    'color' : '#f9e0ee', 
    'cursor' : 'default' 
}) 
     jQuery("#checkout-accordion-payment").css({ 
    'display' : 'none' 
}) 

     jQuery("#checkout-accordion-delivery").css({ 
    'display' : 'none' 
}) 


    //after delivery is shown, add href 
     jQuery('#collapse-billing').on('show.bs.collapse', function() { 
     jQuery("#panel-billing-heading").attr("href", "#collapse-billing").removeClass("collapsed").css({ 
    'background-color' : '#fff', 
    'color' : '#000', 
    'border' : '0px', 
    'cursor' : 'pointer' 
}) 
}) 
     jQuery('#collapse-delivery').on('show.bs.collapse', function() { 
     jQuery("#panel-delivery-heading").attr("href", "#collapse-delivery").removeClass("collapsed").css({ 
    'background-color' : '#fff', 
    'color' : '#000', 
    'border' : '0px', 
    'cursor' : 'pointer' 
}) 
}) 

    //after delivery is shown, add href 
     jQuery('#collapse-delivery').on('show.bs.collapse', function() { 
     jQuery("#checkout-accordion-delivery").css({ 
    'display' : 'block' 
}) 
}) 

     //after payment is shown, add href 
     jQuery('#collapse-payment').on('show.bs.collapse', function() { 
     jQuery("#panel-payment-heading").attr("href", "#collapse-payment").removeClass("collapsed").css({ 
    'background-color' : '#fff', 
    'color' : '#000', 
    'border' : '0px', 
    'cursor' : 'pointer' 
}) 
     }) 

    //after delivery is shown, add href 
     jQuery('#collapse-payment').on('show.bs.collapse', function() { 
     jQuery("#checkout-accordion-payment").css({ 
    'display' : 'block' 
}) 
}) 

     jQuery('#collapse-billing').on('show.bs.collapse', function() { 
     jQuery("#checkout-accordion-billing").css({ 
    'display' : 'block' 
}) 
}) 

    //after delivery is shown, add href 
     jQuery('#collapse-billing').on('show.bs.collapse', function() { 
     jQuery("#checkout-accordion-billing").css({ 
    'display' : 'block' 
}) 
}) 

    //after payment is shown, enable Place Order button 
     jQuery('#collapse-payment').on('show.bs.collapse', function() { 
     jQuery("#place_order").prop("disabled", false).css({ 
    'background-color' : '#F683C2', 
    'color' : '#fff', 
    'cursor' : 'pointer' 
}) 
     }) 
</script> 
<?php else: ?> 
<script> 
jQuery("#panel-delivery-heading").removeAttr("href").css({ 
    'backgroundColor' : '#EEE', 
    'color' : '#ddd', 
    'border' : '1px solid #ddd', 
    'cursor' : 'default' 
}) 

jQuery("#panel-billing-heading").removeClass("collapsed"); 
jQuery("#collapse-billing").addClass("in"); 


     jQuery("#panel-payment-heading").removeAttr("href").css({ 
    'background-color' : '#EEE', 
    'color' : '#ddd', 
    'border' : '1px solid #ddd', 
    'cursor' : 'default' 
}) 
     jQuery("#place_order").prop("disabled", true).css({ 
    'background-color' : '#f4bbda', 
    'color' : '#f9e0ee', 
    'cursor' : 'default' 
}) 
     jQuery("#checkout-accordion-payment").css({ 
    'display' : 'none' 
}) 

     jQuery("#checkout-accordion-delivery").css({ 
    'display' : 'none' 
}) 

     jQuery("#panel-billing").css({ 
    'margin-top' : '10px' 
}) 



     jQuery('#collapse-delivery').on('show.bs.collapse', function() { 
     jQuery("#panel-delivery-heading").attr("href", "#collapse-delivery").removeClass("collapsed").css({ 
    'background-color' : '#fff', 
    'color' : '#000', 
    'border' : '0px', 
    'cursor' : 'pointer' 
}) 
}) 

    //after delivery is shown, add href 
     jQuery('#collapse-delivery').on('show.bs.collapse', function() { 
     jQuery("#checkout-accordion-delivery").css({ 
    'display' : 'block' 
}) 
}) 

     //after payment is shown, add href 
     jQuery('#collapse-payment').on('show.bs.collapse', function() { 
     jQuery("#panel-payment-heading").attr("href", "#collapse-payment").removeClass("collapsed").css({ 
    'background-color' : '#fff', 
    'color' : '#000', 
    'border' : '0px', 
    'cursor' : 'pointer' 
}) 
     }) 

    //after delivery is shown, add href 
     jQuery('#collapse-payment').on('show.bs.collapse', function() { 
     jQuery("#checkout-accordion-payment").css({ 
    'display' : 'block' 
}) 
}) 

     jQuery('#collapse-billing').on('show.bs.collapse', function() { 
     jQuery("#checkout-accordion-billing").css({ 
    'display' : 'block' 
}) 
}) 



    //after payment is shown, enable Place Order button 
     jQuery('#collapse-payment').on('show.bs.collapse', function() { 
     jQuery("#place_order").prop("disabled", false).css({ 
    'background-color' : '#F683C2', 
    'color' : '#fff', 
    'cursor' : 'pointer' 
}) 
     }) 

</script> 
<?php endif ?> 

私はPHP if + elseステートメントを使用して終了しました。基本的に、ログインしていない場合は、パネル＃2を無効にしてください。ログインしている場合は有効にして、アコーディオンパネルを切り替えます。デバッグモードではエラーは発生しません。

他人にも役立つことを願っています。

Answer 2

WordPressにログインしている場合は、「ログイン」クラスが自動的にbodyタグに追加されます。したがって、jQueryで簡単に確認できます。

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