CODEWITHSUNDEEP
jquery
Seong Lee
Seong Lee

Reputation: 10520

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

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;
    }
});

Upvotes: 1

Views: 242

Answers (2)

Praveen
Praveen

Reputation: 56501

($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

Upvotes: 1

bipen
bipen

Reputation: 36531

$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

Upvotes: 2

Related Questions