在頁面加載時運行 javascript wordpress

Question

我創建了一個復選框和一個輸入字段，並將它們添加到我的 WooCommerce 結帳中。 未選中復選框時應隱藏輸入字段，而選中復選框后顯示。

單擊復選框時，這工作正常 - 但在初始頁面加載時，未選中復選框，但顯示輸入字段。

我如何能夠在初始頁面加載時運行 javascript，從而隱藏輸入字段。

這是我現在擁有的代碼：

  
function conditionally_hide_show_checkout_field() {
   wc_enqueue_js( "
      $('#gift_wrap').change(function() {
         if ($(this).is(':checked') ) {
            $('#personal_message_field').show();
         } else {
            $('#personal_message_field').hide();
         }
      });
   " );
}

add_action( 'wp_footer', 'on_load_script' );

function on_load_script()
{
  ?>
    <script type="text/javascript">
        window.onload = function() { conditionally_hide_show_checkout_field };        
    </script>
    <?php           
};

我正在學習 javascript，所以這可能有點傻。 但是每個人都必須一路學習，所以我決定發布我的問題並學習。

謝謝！

Answer 1

你做錯了。

1. conditionally_hide_show_checkout_field是 php function 您不能在腳本標簽中將其稱為 JS function。
2. 即使您使用<?php echo conditionally_hide_show_checkout_field(); ?>調用它 <?php echo conditionally_hide_show_checkout_field(); ?>它不會 output 任何 js 代碼，因為你正在使用wc_enqueue_js
3. 您的 jQuery 代碼存在一些問題。 in WordPress, you access jquery using jQuery not with $ so you'll have to pass jQuery and use it as $ using the function.

因此，您只需要在 function 中使用wc_enqueue_js編寫 Js 代碼，並將 function 掛接到wp_footer上，您不必編寫<script>標記或其他任何內容。

這是供您使用的干凈且正確的代碼。 您可以alert某些內容以確保它在頁面加載時是否正常工作。

function conditionally_hide_show_checkout_field() {
    wc_enqueue_js(
        "
        ( function( $ ) {
            window.onload = function() {
                $( document ).on( 'change', '#gift_wrap', function() {
                    if ( $( this ).is( ':checked' ) ) {
                        $( '#personal_message_field' ).show();
                    } else {
                        $( '#personal_message_field' ).hide();
                    }
                } );
            };
        }( jQuery ) );
    "
    );
}
add_action( 'wp_footer', 'conditionally_hide_show_checkout_field' );