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);
});
I moved this to my new setting An Object in the following:
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")) {< br /> // 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();
});
The problem I encountered The question is how’this’ works in object-oriented Javascript. In the original settings, I was able to use’this’ to refer to the accordion content that was clicked. I can’t access it using object-oriented methods. Can someone help me ?
event.target to refer to the element that triggered the event, Or use event.currentTarget to refer to the element bound by the handler, which is equivalent to using it.
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");
}
}
Learn more about event handling with jQuery.
I think I’m currently writing very good javascript, but I’m trying to adopt a more object-oriented approach. I’ve just started doing this, please forgive my promise. I’m moving some of my functions to objects and meet Coming to this question. Previously, I had an accordion function that worked like this:
jQuer y(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);
});
I moved this to an Object in my new settings, as shown below:
< /p>
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();
});
The problem I encountered is how’this’ works in object-oriented Javascript. In the original setting, I was able to use’this’ to Quote the accordion content that was clicked. I can’t access it using object-oriented methods. Can someone help me?
You can use event.target to refer to the element that triggered the event, or use event.currentTarget To refer to the element bound by the handler, which is equivalent to using it.
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") ;
}
}
Learn more about event handling with jQuery.