Javascript function that can be used by many elements and then distinguish which element clicked it

Question

for example i have 12 div tags that each represent a month. when clicked each one will display another div for its month and hide all the other months divs

The 12 month divs have the class month in common. the sections that each contain content for that month have month_section in common and the name of the month they represent as uncommon.

my javascript code so far:

$("#January,#February,#March,#April").click(function(e)){
  $(".month").removeClass("highlight");
  $(".month_sections").removeClass("show");
  $(".month_sections").addClass("hide");
  if(this == "#January"){(this).addClass("highlight");$(".january").addClass("show");}
  else if(this == "#February"){(this).addClass("highlight");$(".february").addClass("show");}
  else if(this == "#March"){(this).addClass("highlight");$(".march").addClass("show");}
  else if(this == "#April"){(this).addClass("highlight");$(".april").addClass("show");}
});

the if statement is not being correctly detected

Inside the event handler, `this` will refer directly to the DOM node involved. Your code already uses `this`, though incorrectly: `(this)` should be `$(this)`. — Pointy, Jul 14 '15 at 15:20
What you need is some sort of accordion plugin, try bootstrap accordion! — n4m31ess_c0d3r, Jul 14 '15 at 15:23
Also you have need to remove the extra ) here click(function(e)) -> click(function(e) — nril, Jul 14 '15 at 15:30

score 1 · Answer 1 · edited May 23 '17 at 12:29

1

Usee.target as it refers to the element clicked on.

Note that this is not the same as using $(this). Read more about that in this question's answer: Difference between $(this) and event.target?

edited May 23 '17 at 12:29

Community

1
1

answered Jul 14 '15 at 15:20

FWDekker

1,823
2
20
26

score 1 · Accepted Answer · answered Jul 14 '15 at 15:31

In the event handler you are trying to compare the this object to a string.

The this in the context of the jQuery callback is the element that was clicked. If you wish to compare who was clicked you have to use this.id which in context of the first month will equal January. So you can compare.

if(this.id == "January") {
    $(this).addClass("highlight");
    $(".january").addClass("show");
}

There are some other approaches you can take to save on some code.

$("#January,#February,#March,#April").click(function(e) {
    var monthStr = this.id;

    $(".month").removeClass("highlight");
    $(".month_sections").removeClass("show");
    $(".month_sections").addClass("hide");

    $(this).addClass("highlight");
    $("." + monthStr.toLowerCase()).addClass("show");
});

I hope this is useful.

this is what i used, just for some reason the last line didnt overwrite the previous hide class so i had to add: $("." + monthStr.toLowerCase()).removeClass("hide"); right before the last line. PS thanks for the toLowerCase() that removes the need for if/else — blu, Jul 14 '15 at 16:20

score 0 · Answer 3 · answered Jul 14 '15 at 15:20

0

Use the following as your if statement:

if ($(this).attr('id') === 'January')

You could also use a switch statement if you need something special for each month:

switch ($(this).attr('id'))
{
   case 'January':
   case 'February':
...
}

Good luck!

answered Jul 14 '15 at 15:20

murmeister

582
1
4
7

score 0 · Answer 4 · answered Jul 14 '15 at 15:54

You have several mistakes in your code

You're comparing 'this' with the id of an element, this is the javascript object and not the id of the element

addClass is a jQuery method, you must refer to it as '$(this)'

Try this

$("#January,#February,#March,#April").click(function(e)) {
    $(".month").removeClass("highlight");
    $(".month_sections").removeClass("show");
    $(".month_sections").addClass("hide");
    if (this.id == "January") {
        $(this).addClass("highlight");
        $(".january").addClass("show");
     } 
    else if (this.id == "February") {
        $(this).addClass("highlight");
        $(".february").addClass("show");
    } 
    else if (this.id == "March") {
        $(this).addClass("highlight");
        $(".march").addClass("show");
    } 
    else if (this.id == "April") {
        $(this).addClass("highlight");
        $(".april").addClass("show");
    }
});

NOTE: If you use e.target.id or $(this).attr('id') instead of this.id, any of these should work

Javascript function that can be used by many elements and then distinguish which element clicked it

4 Answers4