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

在HTML5空白Wordpress主题中使用jQuery

1 个答案: