javascript - WordPress Jquery 不适用于自定义搜索字段

Question

自定义 jQuery 在 WordPress 中不起作用。我正在尝试制作一个自定义的 WordPress 搜索字段，在单击按钮后会出现输入字段，但这在 WordPress 上不起作用。请查看我的代码并帮助我修复我做错的事情。

<强> See Demo JSFIDDLE

这是我的 jQuery

    jQuery(document).ready(function($){
            var submitIcon = $('.searchbox-icon');
            var inputBox = $('.searchbox-input');
            var searchBox = $('.searchbox');
            var isOpen = false;
            submitIcon.click(function(){
                if(isOpen == false){
                    searchBox.addClass('searchbox-open');
                    inputBox.focus();
                    isOpen = true;
                } else {
                    searchBox.removeClass('searchbox-open');
                    inputBox.focusout();
                    isOpen = false;
                }
            });  

            submitIcon.mouseup(function(){
                return false;
            });

            searchBox.mouseup(function(){
                return false;
            });

        $(document).mouseup(function(){
            if(isOpen == true){
                $('.searchbox-icon').css('display','block');
                submitIcon.click();
            }
        });
});
function buttonUp(){
    var inputVal = $('.searchbox-input').val();
    inputVal = $.trim(inputVal).length;
    if( inputVal !== 0){
        $('.searchbox-icon').css('display','none');
    } else {
        $('.searchbox-input').val('');
        $('.searchbox-icon').css('display','block');
    }
}

Answer 1

我认为您的代码没有任何问题，您可能只需要将您的脚本正确地排队到Wordpress中...

1.) 首先创建名为 js 的文件夹。您的主题文件结构应如下所示:

-index.php

-single.php

-js <-- 这是您包含 custom-search-field.js 的文件夹

-其他文件.php

2.) 创建名为 custom-search-field.js 的文件，并将您发布的代码复制到该文件中。然后将该文件添加到您的 js 文件夹。

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

/**
* Enqueues scripts and styles.
*
*/
function enqueue_js_scripts_and_css() {

wp_enqueue_script( 'jquery' );//Enqueues Jquery that comes with Wordpress
    /*
    * Registers a script file in WordPress to be linked to a page 
    * later using the wp_enqueue_script()
    * @link https://developer.wordpress.org/reference/functions/wp_enqueue_script/
    * @link https://codex.wordpress.org/Plugin_API/Action_Reference/wp_enqueue_scripts
    */

    wp_register_script( 'custom_search_field', get_template_directory_uri() . '/js/custom-search-field.js', array( 'jquery' ), '1.0', false );

   // Enqueue your custom search field JS file.
    wp_enqueue_script( 'custom_search_field' );
}

add_action( 'wp_enqueue_scripts', 'enqueue_js_scripts_and_css' );