我认为我目前写的 javascript 相当不错,但我正在尝试转向更面向对象的方法。我才刚刚开始,所以请原谅我的菜鸟。我正在将我的一些功能转移到对象上并遇到了这个问题。以前,我有一个像这样工作的 Accordion 函数:
jQuery(document).ready(function ($){
var accordionTrigger = $('.accordion-title');
function toggleAccordion() {
// Set a variable for the accordion content
var accordionContent = $('.accordion-container .accordion-content p');
// Slide up any open content
accordionContent.slideUp();
// Remove any active classes
accordionTrigger.removeClass("active");
// If the sibling content is hidden
if(!$(this).siblings().is(":visible")) {
// slide it down
$(this).siblings().slideDown();
// add a class to the title so we can style the active state and change the svg
$(this).addClass("active");
}
}
accordionTrigger.on("click", toggleAccordion);
});
我已将其移至我的新设置中的一个对象,如下所示:
Accordion = {
accordionContent: '.accordion-container .accordion-content p',
accordionTrigger: '.accordion-title',
init: function() {
jQuery(this.accordionTrigger).click(this.toggleAccordion.bind(this));
},
toggleAccordion: function() {
// Slide up any open content
jQuery(this.accordionContent).slideUp();
// Remove any active classes
jQuery(this.accordionTrigger).removeClass("active");
// If the sibling content is hidden
if(!jQuery(this.accordionTrigger).siblings().is(":visible")) {
// slide it down
jQuery(this.accordionTrigger).siblings().slideDown();
// add a class to the title so we can style the active state and change the svg
jQuery(this.accordionTrigger).addClass("active");
}
}
}
jQuery(document).ready(function ($){
Accordion.init();
});
我遇到的问题是“this”在面向对象的 Javascript 中的工作方式。在最初的设置中,我能够使用“this”来引用被点击的 Accordion 内容。我无法使用面向对象的方法访问它。有人可以帮我吗?
最佳答案
您可以使用 event.target
引用触发事件的元素,或 event.currentTarget
引用处理程序绑定(bind)到的元素,这相当于使用 this
。
toggleAccordion: function(event) {
// Slide up any open content
jQuery(this.accordionContent).slideUp();
// Remove any active classes
jQuery(this.accordionTrigger).removeClass("active");
// If the sibling content is hidden
if(!jQuery(event.currentTarget).siblings().is(":visible")) {
// slide it down
jQuery(event.currentTarget).siblings().slideDown();
// add a class to the title so we can style the active state and change the svg
jQuery(event.currentTarget).addClass("active");
}
}
关于javascript - 面向对象的 Javascript 中的“This”,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32686161/