JavaScript switch comparison not working

Question

JQuery

var Page = parseInt($(".active_pagination").data("number"));
  	var First = parseInt($(".pagination_number:first").data("number"));
  	var Last = parseInt($(".pagination_number:last").data("number"));
  	alert("Page: "+Page+" First: "+First+" Last: "+Last);
  	switch(Page){
  		case (Page === First):
  		    alert("First");
  		    $(".prev").closest('li').hide();
  		    $(".next").closest('li').show();
  		break;
  		case (Page === Last):
  		    alert("Last");
  		    $(".prev").closest('li').show();
  		    $(".next").closest('li').hide();
  		break;
  		default:
  		    alert("Default");
  		    $(".prev").closest('li').show();
  		    $(".next").closest('li').show();
  	}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<li><a href="#" class="pagination_list pagination_number active_pagination" data-number="1">1</a></li>
<li><a href="#" class="pagination_list pagination_number" data-number="2">2</a></li>
<li><a href="#" class="pagination_list pagination_number" data-number="3">3</a></li>
<li><a href="#" class="pagination_list pagination_number" data-number="4">4</a></li>
<li><a href="#" class="pagination_list pagination_number" data-number="5">5</a></li>

Run codeHide result

I parsed all the variables as Int and then did a comparison, but it still does not work. I do not know how it constantly fulfills the default condition.

Answer 1

In the case switch block, you really need to set conditional statements based on the value of the variable that is used inside the parameter switch.

var Page = parseInt($(".active_pagination").data("number"));
  	var First = parseInt($(".pagination_number:first").data("number"));
  	var Last = parseInt($(".pagination_number:last").data("number"));
  	alert("Page: "+Page+" First: "+First+" Last: "+Last);
  	switch(Page){
  		case (First):
  		    alert("First");
  		    $(".prev").closest('li').hide();
  		    $(".next").closest('li').show();
  		break;
  		case (Last):
  		    alert("Last");
  		    $(".prev").closest('li').show();
  		    $(".next").closest('li').hide();
  		break;
  		default:
  		    alert("Default");
  		    $(".prev").closest('li').show();
  		    $(".next").closest('li').show();
  	}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<li><a href="#" class="pagination_list pagination_number active_pagination" data-number="1">1</a></li>
<li><a href="#" class="pagination_list pagination_number" data-number="2">2</a></li>
<li><a href="#" class="pagination_list pagination_number" data-number="3">3</a></li>
<li><a href="#" class="pagination_list pagination_number" data-number="4">4</a></li>
<li><a href="#" class="pagination_list pagination_number" data-number="5">5</a></li>

Run codeHide result

Answer 2

Replace your switch with

switch(Page){
        case First:
            alert("First");
            $(".prev").closest('li').hide();
            $(".next").closest('li').show();
            break;
        case Last:
            alert("Last");
            $(".prev").closest('li').show();
            $(".next").closest('li').hide();
            break;
        default:
            alert("Default");
            $(".prev").closest('li').show();
            $(".next").closest('li').show();
    }

switch implicitly checks equality with the specified cases; you yourself do not perform the comparison.

Answer 3

Method 1

switch (Page) {

    case First:

        alert("First");

        break;

    case Last:

        alert("Last");

        break;

    default:

        alert("Default");

}

Method 2

    if(Page === First){

        alert("First");

    }

    else if (Page === Last){

        alert("Last");

   }else {

        alert("Default");

   }