Question

您好我在尝试将JavaScripts代码转换为jquery以获得更好的性能。

这是我的JS代码：

(function() {

    var body_container = document.body,
        content = document.querySelector( '.content-wrap' ),
        open_menu = document.getElementById( 'open-button' ),
        close_menu = document.getElementById( 'close-button' ),
        checkifOpen = false;

    function init() {
        initialize_process();
    }

    function initialize_process() {
        open_menu.addEventListener( 'click', toggleMenu );
        if( close_menu ) {
            close_menu.addEventListener( 'click', toggleMenu );
        }

        // close the menu element if the target it´s not the menu element or one of its descendants..
        content.addEventListener( 'click', function(ev) {
            var target = ev.target;
            if( checkifOpen && target !== open_menu ) {
                toggleMenu();
            }
        } );
    }

现在这是我转换的javascript版javascript：

(function() {

    var body_container = $('body'),
        content = $( '.content-wrap' ),
        open_menu = $( '.open-button' ),
        close_menu = $( '.close-button' ),
        checkifOpen = false;

    function init() {
        initialize_process();
    }


    function initialize_process() {
        open_menu.bind( 'click', toggleMenu );
        if( close_menu ) {
            close_menu.bind( 'click', toggleMenu );
        }

        // close the menu element if the target it´s not the menu element or one of its descendants..
        content.bind( 'click', function(ev) {
            var target = ev.target;
            if( checkifOpen && target !== open_menu ) {
                toggleMenu();
            }
        } );
    }

由于某些原因，此代码无效。只是想知道我哪里出错了。特别是我将绑定元素的部分替换为JavaScript的addEventListener函数。

任何帮助将不胜感激。

Answer 1

您没有使用正确的选择器。原始代码有：

document.getElementById( 'open-button' )

使用id＆＃34;打开按钮＆＃34;标识一个元素。新代码有：

open_menu = $( '.open-button' )

使用class＆＃34;打开按钮＆＃34;标识元素（或元素集）。要使用id，您需要使用#：

open_menu = $( '#open-button' )

可能存在进一步的问题，但从这个问题出发，没有其他方法可以按预期工作......

jQuery转换的代码不会工作

1 个答案: