Question

我不能使用id为的html元素

notification-panel-sidebar

在我的JavaScript中，但是我可以使用jquery直接访问它。

这是代码：

const notificationContainer = {

    elements: {
        notificationPanelSidebar: $('#notification-panel-sidebar'),
        notificationPanelSidebarContainer: $('#notification-panel-sidebar-container')
    },

    classes: {
        notificationContainerActive: 'notification-container-active'
    },

    render () {
        this.toggleNotificationContainer();
    },

    toggleNotificationContainer () {
        console.log(this.elements.notificationPanelSidebar);
        this.elements.notificationPanelSidebar.click((e) => { // this does not work
        // $('#notification-panel-sidebar').click((e) => { // this works
            let _this = $(e.currentTarget);
            if (_this.hasClass(this.classes.notificationContainerActive)) {
                console.log("+++++++");
                this.hideNotificationContainer();
            } else {
                console.log("-------");
                _this.addClass(this.classes.notificationContainerActive);
                this.elements.notificationPanelSidebarContainer.show();
            }
        });
    },

    hideNotificationContainer () {
        this.elements.notificationPanelSidebar.removeClass(this.classes.notificationContainerActive);
        this.elements.notificationPanelSidebarContainer.hide();
    }

}

$(document).ready(function () {
    notificationContainer.render();
});

我没有收到错误消息。

Answer 1

问题在于，您需要在DOM准备就绪之前创建notificationContainer对象，因此$('#notification-panel-sidebar')不会选择任何内容。将变量初始化放入$(document).ready()中。

$(document).ready(function() {
  const notificationContainer = {

    elements: {
      notificationPanelSidebar: $('#notification-panel-sidebar'),
      notificationPanelSidebarContainer: $('#notification-panel-sidebar-container')
    },

    classes: {
      notificationContainerActive: 'notification-container-active'
    },

    render() {
      this.toggleNotificationContainer();
    },

    toggleNotificationContainer() {
      console.log(this.elements.notificationPanelSidebar);
      this.elements.notificationPanelSidebar.click((e) => { // this does not work
        // $('#notification-panel-sidebar').click((e) => { // this works
        let _this = $(e.currentTarget);
        if (_this.hasClass(this.classes.notificationContainerActive)) {
          console.log("+++++++");
          this.hideNotificationContainer();
        } else {
          console.log("-------");
          _this.addClass(this.classes.notificationContainerActive);
          this.elements.notificationPanelSidebarContainer.show();
        }
      });
    },

    hideNotificationContainer() {
      this.elements.notificationPanelSidebar.removeClass(this.classes.notificationContainerActive);
      this.elements.notificationPanelSidebarContainer.hide();
    }

  }
  notificationContainer.render();
});

Answer 2

什么不起作用？

const notificationContainer = {

    elements: {
        notificationPanelSidebar: $('#notification-panel-sidebar'),
        notificationPanelSidebarContainer: $('#notification-panel-sidebar-container')
    },

    classes: {
        notificationContainerActive: 'notification-container-active'
    },

    render () {
        this.toggleNotificationContainer();
    },

    toggleNotificationContainer () {
        console.log(this.elements.notificationPanelSidebar);
        this.elements.notificationPanelSidebar.click((e) => { // this does not work
        // $('#notification-panel-sidebar').click((e) => { // this works
            let _this = $(e.currentTarget);
            if (_this.hasClass(this.classes.notificationContainerActive)) {
                console.log("+++++++");
                this.hideNotificationContainer();
            } else {
                console.log("-------");
                _this.addClass(this.classes.notificationContainerActive);
                this.elements.notificationPanelSidebarContainer.show();
            }
        });
    },

    hideNotificationContainer () {
        this.elements.notificationPanelSidebar.removeClass(this.classes.notificationContainerActive);
        this.elements.notificationPanelSidebarContainer.hide();
    }

}

$(document).ready(function () {
    notificationContainer.render();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="notification-panel-sidebar">
sidebar
</div>
<div id="notification-panel-sidebar-container">
sidebar-container
</div>

JavaScript无法从对象获取元素

2 个答案: