在 HTML5 空白 Wordpress 主题中使用 jQuery

Question

我在尝试解决这个问题时遇到了大问题。我擅长HTML 和CSS，但我总是很难使用JS 和jQuery，当它进入Wordpress 主题时更是如此。

所以我希望有人可以指导我完成这个。 HTML5Blank 主题通过 functions.php 加载几个 JS 文件，利用接下来的几行来加载自定义脚本的文件：

wp_register_script('html5blankscripts', get_template_directory_uri() . '/js/scripts.js', array('jquery'), '1.0.0'); // Custom scripts
wp_enqueue_script('html5blankscripts'); // Enqueue it!

那个文件的内容是：

(function ($, root, undefined) {

    $(function () {

        'use strict';

        // DOM ready, take it away

    });

})(jQuery, this);

那么现在......我应该怎么做才能在上述文件中正确插入下一个 jQuery 代码？

$(".abc").mouseenter(function(){
    clearTimeout($('#def').data('timeoutId'));
    $('#def').show(200);
}).mouseleave(function(){
    var someElement = $(this);
    var timeoutId = setTimeout(function(){
        $('#def').hide(200);
    }, 650);
    $('#def').data('timeoutId', timeoutId); 
});

$("#def").mouseenter(function(){
    clearTimeout($('#def').data('timeoutId'));
}).mouseleave(function(){
    var someElement = $(this);
    var timeoutId = setTimeout(function(){
        $('#def').hide(200);
    }, 650);
    $('#def').data('timeoutId', timeoutId); 
});

我在这件事上很迷茫，所以你能给我的任何帮助将不胜感激:)

Answer 1

下面的代码应该可以做到：

(function ($, root, undefined) {

    $(function () {

        'use strict';

        // DOM ready, take it away
        $(".abc").mouseenter(function () {
            clearTimeout($('#def').data('timeoutId'));
            $('#def').show(200);
        }).mouseleave(function () {
            var someElement = $(this);
            var timeoutId = setTimeout(function () {
                $('#def').hide(200);
            }, 650);
            $('#def').data('timeoutId', timeoutId);
        });

        $("#def").mouseenter(function () {
            clearTimeout($('#def').data('timeoutId'));
        }).mouseleave(function () {
            var someElement = $(this);
            var timeoutId = setTimeout(function () {
                $('#def').hide(200);
            }, 650);
            $('#def').data('timeoutId', timeoutId);
        });

    });

})(jQuery, this);

JSFiddle