0

我注意到一些按钮在我的主题中停止工作，所以我开始调试，发现问题出在我的模态脚本注册上。

请有人能告诉我这是如何导致问题的吗？我已经以同样的方式注册并加入了其他几个文件。

public function __construct()
    {
        add_action( 'wp_enqueue_scripts', array( $this, 'scripts' ) );
}

function scripts() {

        wp_register_script( 'modal_script', plugin_dir_url( __FILE__ ) . 'js/modal.js', array( 'jquery'), NULL, false );
        wp_register_style( 'modal_css', plugin_dir_url( __FILE__ ) . 'css/modal.css');
        wp_enqueue_script( 'modal_script' );
        wp_enqueue_style( 'modal_css');
}

以及导致冲突的 modal.js 文件（或我注册/排队的方式）：

    (function ($) {

    "use strict";

$(document).ready(function () {
var my_modal_modal = document.querySelector(".my-modal-modal");
var my_modal_trigger = document.querySelector(".my-modal-trigger");
var my_modal_closeButton = document.querySelector(".my-modal-close-button");

function my_modal_toggleModal() {
    my_modal_modal.classList.toggle("show-modal");
}

function my_modal_windowOnClick(event) {
    if (event.target === my-modal-modal) {
        my_modal_toggleModal();
    }
}

my_modal_trigger.addEventListener("click", my_modal_toggleModal);
my_modal_closeButton.addEventListener("click", my_modal_toggleModal);
window.addEventListener("click", my_modal_windowOnClick);

})
})(jQuery);

在此先感谢您的任何建议。

编辑：控制台输出：

未捕获的类型错误：无法在 HTMLDocument 中读取 null 的属性“addEventListener”。(modal.js:21) 在 i (jquery.js?ver=1.12.4-wp:2) 在 Object.fireWith [as resolveWith] (jquery.js?ver=1.12.4-wp:2) 在功能。准备好 (jquery.js?ver=1.12.4-wp:2) 在 HTMLDocument.J (jquery.js?ver=1.12.4-wp:2)

更新：已解决

好吧，在将其缩小到 2 行代码之后，我决定用 jQuery 重新编写触发器并且它起作用了。我想我会继续重写整个文件来整理它。

4

0 回答 0