jQuery - triggering show(),hide() on button click

Question

With my fiddle, I made it to highlight on one of main menu buttons when loaded and show() and hide() corresponding button set in the bottom.

What I think is wrong but can't figure out myself is something to do $this variable's reference scope in my switch statement. In my case, $this points to the clicked button value which I presume is the name of the class but in my switch statement, I am not sure whether I can reference the id names from $this. I guess my question is what value does $this hold in my scenario?

It would be nice to see a working example, possibly with less code as I can see many duplicates where it could be simplified.

$('.menu').click(function () {
    if ($(this) != $('.highlight')) {
        $(this).addClass('highlight')
            .siblings('.menu')
            .removeClass('highlight');
    }
    switch ($this) {
        case '#dateMenu':
            $('.date-chart').show();
            $('.jc-chart').hide();
            $('.jp-chart').hide();
            $('.ws-chart').hide();
            break;
        case '#jcMenu':
            $('.date-chart').hide();
            $('.jc-chart').show();
            $('.jp-chart').hide();
            $('.ws-chart').hide();
            break;
        case '#jpMenu':
            $('.date-chart').hide();
            $('.jc-chart').hide();
            $('.jp-chart').show();
            $('.ws-chart').hide();
            break;
        case '#wsMenu':
            $('.date-chart').hide();
            $('.jc-chart').hide();
            $('.jp-chart').hide();
            $('.ws-chart').show();
            break;
    }
});

I would have thought:switch (this.id) ... case ("wsMenu") - but you likely just need to hide the siblings and show $this once you set $this=$(this) - and you need $(this).hasClass('.highlight') — mplungjan
– mplungjan, Commented Jul 15, 2013 at 4:45
put a debugger; in your code and open up your console in firefox or chrome. console.log(this) — Seth McClaine
– Seth McClaine, Commented Jul 15, 2013 at 4:45
where is $this ?? i guess that should be $(this) which again makes no sense.. :) — bipen
– bipen, Commented Jul 15, 2013 at 4:47

bipen · Accepted Answer · 2013-07-15 07:51:04Z

2

$this should be $(this) ... this is the refrence to the current element... since you are checking the id. use prop() .

 switch ($(this).prop('id')) {  or  switch (this.id) { ...

and remove the # form the case

try this

 $('.menu').click(function () {
if (!$(this).hasClass('.highlight'))) {
    $(this).addClass('highlight')
        .siblings('.menu')
        .removeClass('highlight');
}

switch ($(this).prop('id')) {
    case 'dateMenu':
        $('.date-chart').show();
        $('.jc-chart').hide();
        $('.jp-chart').hide();
        $('.ws-chart').hide();
        break;
    case 'jcMenu':
        $('.date-chart').hide();
        $('.jc-chart').show();
        $('.jp-chart').hide();
        $('.ws-chart').hide();
        break;
    case 'jpMenu':
        $('.date-chart').hide();
        $('.jc-chart').hide();
        $('.jp-chart').show();
        $('.ws-chart').hide();
        break;
    case 'wsMenu':
        $('.date-chart').hide();
        $('.jc-chart').hide();
        $('.jp-chart').hide();
        $('.ws-chart').show();
        break;
}
});

fiddle here

updated

for reduced code... you can use siblings().

 switch ($(this).prop('id')) {
    case 'dateMenu':
        $('.date-chart').show().siblings().hide();

        break;
    case 'jcMenu':

        $('.jc-chart').show().siblings().hide();

        break;
    case 'jpMenu':

        $('.jp-chart').show().siblings().hide();

        break;
    case 'wsMenu':

        $('.ws-chart').show().siblings().hide();
        break;
}

updated fiddle

edited Jul 15, 2013 at 7:51

answered Jul 15, 2013 at 4:52

bipen

36.6k9 gold badges51 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

mplungjan Over a year ago

+1 but please fix the erronous if ($(this) != $('.highlight')) which I believe should be if (!$(this.hasClass('.highlight'))

Praveen · Accepted Answer · 2013-07-15 07:58:28Z

1

($this) is wrong without assigning, instead use this.id

You can use indeed like

var id = this.id;
switch (id)

And remove # in your cases and make like below

switch (this.id) {
        case 'dateMenu': //removed #
            $('.date-chart').show();
            $('.jc-chart').hide();
            $('.jp-chart').hide();
            $('.ws-chart').hide();
            break;
        case 'jcMenu':  //removed #
            $('.date-chart').hide();
            $('.jc-chart').show();
            $('.jp-chart').hide();
            $('.ws-chart').hide();
            break;
        case 'jpMenu':  //removed #
            $('.date-chart').hide();
            $('.jc-chart').hide();
            $('.jp-chart').show();
            $('.ws-chart').hide();
            break; 
        case 'wsMenu':  //removed #
            $('.date-chart').hide();
            $('.jc-chart').hide();
            $('.jp-chart').hide();
            $('.ws-chart').show();
            break;
    }

Working fiddle

edited Jul 15, 2013 at 7:58

answered Jul 15, 2013 at 4:51

Praveen

56.7k35 gold badges137 silver badges169 bronze badges

4 Comments

mplungjan Over a year ago

$this=this.id is poor documentation. $x normally signifies that the var is a jQuery object.

Praveen Over a year ago

@mplungjan Thanks for pointing the mistake. From googling, james.padolsey.com/javascript/jquery-code-smells I came to know it is an ugly practice. But anyother reason?

mplungjan Over a year ago

IF you use $this, THEN make sure it is $(this). IF you use $mydivs THEN make sure it is $("some selector returning divs") - if your code is to be self documenting do NOT use a var that has a name that confuses a reader. If you do not want to use $ then that is fine. It would still be id = this.id or in this case no need to save it at all since we only use it once.

mplungjan Over a year ago

You are welcome. PS: With 2.5K rep, you should update your profile with name/avatar :)

Collectives™ on Stack Overflow

jQuery - triggering show(),hide() on button click

2 Answers 2

1 Comment

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related