JavaScript Object Literal“this”

Question

我编写了一个JavaScript对象文字来处理HTML页面上的多个模态。 当我点击一个按钮来显示模态时，出现以下错误。

Uncaught TypeError: this.showModal is not a function 
    at HTMLButtonElement.modalBtns.(anonymous function).onclick (file:///C:/dj-sites/ux_bee/js/base.js:63:22) 

我在想，问题在于“this”关键字指向按钮，而不是对象文字。不知道我应该如何解决这个问题。

var myModalObj = { 
    findAncestor: function(el, cls) { 
     while ((el = el.parentElement) && !el.classList.contains(cls)); 
     return el; 
    }, 
    showModal: function(btn){ 
     var modal_id = btn.getAttribute('data-modal') 
     var modal = document.getElementById(modal_id); 
     modal.style.display = "block"; 
    }, 
    closeModal: function (btn){ 
     var modal = this.findAncestor(btn, 'modal') 
     modal.style.display = "none"; 
    }, 
    init: function(){ 
     var modalBtns = document.getElementsByClassName('my-modal-btn'); 
     for(var i = 0; i < modalBtns.length; i++) { 
      var btn_modal = modalBtns[i]; 
      modalBtns[i].onclick = function() { 
       this.showModal(btn_modal); 
      } 
     } 

     var closeBtns = document.getElementsByClassName('modal-close'); 
     for(var i = 0; i < closeBtns.length; i++) { 
      var btn_close = closeBtns[i]; 
      closeBtns[i].onclick = function() { 
       this.closeModal(btn_close); 
      } 
     } 
    } 
} 
myModalObj.init() 

Answer 1

答案很简单 - 只需更换的this所有实例myModalObj，像这样。

var myModalObj = { 
    findAncestor: function(el, cls) { 
     while ((el = el.parentElement) && !el.classList.contains(cls)); 
     return el; 
    }, 
    showModal: function(btn){ 
     var modal_id = btn.getAttribute('data-modal') 
     var modal = document.getElementById(modal_id); 
     modal.style.display = "block"; 
    }, 
    closeModal: function (btn){ 
     var modal = myModalObj.findAncestor(btn, 'modal') 
     modal.style.display = "none"; 
    }, 
    init: function(){ 
     var modalBtns = document.getElementsByClassName('my-modal-btn'); 
     for(var i = 0; i < modalBtns.length; i++) { 
      var btn_modal = modalBtns[i]; 
      modalBtns[i].onclick = function() { 
       myModalObj.showModal(btn_modal); 
      } 
     } 

     var closeBtns = document.getElementsByClassName('modal-close'); 
     for(var i = 0; i < closeBtns.length; i++) { 
      var btn_close = closeBtns[i]; 
      closeBtns[i].onclick = function() { 
       myModalObj.closeModal(btn_close); 
      } 
     } 
    } 
} 
myModalObj.init() 

你所要做的，这是因为你想调用的函数只存储在myModalObj，所以这是你可以调用它的唯一途径的原因。