Question

自定义jQuery在wordpress中不起作用。我正在尝试制作一个自定义制作wordpress搜索字段，其中一个按钮单击输入字段后出现，但这不适用于wordpress。请查看我的代码，并帮助我解决我的错误。

这是我的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

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

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

-index.php

-single.php

-js＆lt; - 这是包含 custom-search-field.js

的文件夹

-other files.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' );

Wordpress Jquery不适用于自定义搜索字段

1 个答案: