Question

我在javascript类中尝试执行点击功能时遇到了麻烦，“this.overlay.style.display ='block'”由于“this”而无法正常工作，因为“this”指的是我假设的点击事件？我该怎么做才能克服这个障碍？我可以在click事件之外的console.log（options.overlay.id），但在click事件中它将是未定义的。什么是最佳解决方案？

    var popup_overlay = document.getElementById("popup_overlay"),
            update_coins = document.getElementById("update_coins");

// POPUP CLASS
    var Popup = function (options) {
        console.log(options.overlay.id); //THIS WORKS
        this.overlay = options.overlay;
        this.button = options.button;

        this.button.addEventListener("click", function(e){
//            this.overlay.style.display = 'block';
           alert(e.target.getAttribute('data-popup')); 
        });

    };

    var popup_update_coins = new Popup(
            {
                overlay: popup_overlay,
                button: update_coins
            }
    );

Answer 1

您可以使用Arrow function

＆＃13;

// POPUP CLASS
var Popup = function(options) {
  console.log(options.overlay.id); //THIS WORKS
  this.overlay = options.overlay;
  this.button = options.button;

  this.button.addEventListener("click", (e) => { // Arrow function
    this.overlay.style.display = 'block';        // this === Popup
    alert(e.currentTarget.getAttribute('data-popup')); // currentTarget
  });

};

var popup_overlay = document.getElementById("popup_overlay"),
  update_coins = document.getElementById("update_coins");
  
var popup_update_coins = new Popup({
  overlay: popup_overlay,
  button: update_coins
});

＆＃13;

#popup_overlay {
  display: none;
}

＆＃13;

<button id="update_coins" data-popup="TEST">update</button>
<div id="popup_overlay">asdasd</div>

＆＃13;

试图制作一个弹出式javascript类

1 个答案: