时间戳

首页 > 解决方案 > 在 WordPress 中添加自定义 JavaScript 文件

javascript - 在 WordPress 中添加自定义 JavaScript 文件

问题描述

我有一个子主题，其中有一个页面 test.php。在此页面中，我有一个选择元素。When value of option is RED then heading should be displayed. 我为此编写了 JavaScript 代码，但它不起作用。PHD 和 JavaScript 代码如下所述。

    <Select id="colorselector">
       <option value="red">Red</option>
       <option value="yellow">Yellow</option>
       <option value="blue">Blue</option>
    </Select>

    <div id="red" class="colors" style="display:none">
        <h1>Red</h1>
    </div>

JavaScript 是

       <script>  
          $(document).ready(function(){
          $('#colorselector').on('change', function() {
          if ( this.value == 'red')
          {
              $("#red").show();
           }
          else
          {
          $("#red").hide();
          }
       });
       });
     </script>

我将 JavaScript 代码写入文件 custom.js 中，该文件与 test.php 和 style.css 位于同一文件夹中。我将以下代码放在子主题的function.php中。

     add_action('wp_enqueue_scripts', 'tutsplus_enqueue_custom_js');
     function tutsplus_enqueue_custom_js() {
     wp_enqueue_script('custom', 
     get_stylesheet_directory_uri().'custom.js', array(), false, true);
     }

未达到预期输出...我错过了什么？谁能指导我？

我也遵循链接中的方法 2 。我在function.php中使用了以下代码，但它不起作用。

    function wpb_hook_javascript() {
    ?>             
    <script>
    $(document).ready(function(){
    $('#colorselector').on('change', function() {
    if ( this.value == 'red')
    {
    $("#red").show();
    }
    else
    {
    $("#red").hide();
    }
    });
    });
    </script>

    <?php
    }
    add_action('wp_head', 'wpb_hook_javascript');

标签： javascriptphphtmlwordpress

解决方案

遵循以下代码：

将以下代码添加到您的 functions.php 文件中

add_action('wp_footer', 'my_code');

function my_code(){
 ?>
<script>  
jQuery(document).ready(function($){
    $('#colorselector').on('change', function() {
        if ( $(this).value == 'red')
        {
            $("#red").show();
        }
        else
        {
            $("#red").hide();
        }
    });
});
</script>
<?php
}

跳这将解决您的问题。

推荐阅读