我在这里阅读了关于此主题的另一篇文章,并尝试了解决方案(使用 $.proxy()),但它在我的代码中无法按预期工作。它只是在页面加载后立即执行,并且当我单击该元素时不会触发单击事件。
/**
* menu-slider.js
* Written by: Jay Simons
* Cloudulus.Media (https://code.cloudulus.media)
*/
class menuSlider
{
constructor(id, maxWidth)
{
this.id = id;
this.ele = $("#"+id);
this.maxWidth = maxWidth;
this.menuWidth = this.ele.width();
this.winWidth = $(document).width();
this.calc();
$(window).resize(this.calc());
}
calc()
{
this.menuWidth = this.ele.width();
this.winWidth = $(document).width();
if (this.winWidth <= this.maxWidth)
{
this.ele.css("margin-right", -this.menuWidth+"px");
this.ele.append('<div id="menu-slider-btn"><i class="fas fa-bars"></i></div>');
$("#menu-slider-btn").css('position', 'absolute').css('top', 0).css('left', -$("#menu-slider-btn").width()+'px')
.css("box-shadow", "none").css('color', 'white');
$("#menu-slider-btn").click($.proxy(this.toggle(), this));
}
}
toggle()
{
if(this.ele.css("margin-right") == -this.menuWidth+"px" && !this.ele.is(':animated'))
{
this.ele.show();
this.ele.animate({"margin-right": '+='+this.menuWidth}).addClass("active");
}
else
{
if(!this.ele.is(':animated'))
{
this.ele.animate({"margin-right": '-='+this.menuWidth}).removeClass("active");
}
}
}
}
最佳答案
您调用成员函数并传递它们的返回值,而不是将它们传递给事件处理程序。更改这些:
$(window).resize(this.calc());
$("#menu-slider-btn").click($.proxy(this.toggle(), this));
致这些:
$(window).resize($.proxy(this.calc, this));
$("#menu-slider-btn").click($.proxy(this.toggle, this));
关于javascript - 通过 $.proxy() 将类方法绑定(bind)到 Click 事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54586225/