How to Make Case/Swictch Paged Control

Question

Okay, here’s the thing - I’m developing a new personal project, and it’s necessary to control the buttons Previous | Next used at the base Switch/Case, I’m trying to bring numbers to life. Show him how Active.

On the other hand, everything is visual. The idea presented here is actually to go from a element span to another, when it is clicked on one of the buttons Previous or Next, by placing the number of tag <span>..</span> in evidence (detached) from others.

Code

var conta = 0;

var obj = document.getElementsByTagName('span');

switch(conta.toString()){

case '1': obj.[0].className = 'color'; break;

case '2': obj.[1].className = 'color'; break;

case '3': obj.[2].className = 'color'; break;

case '4': obj.[3].className = 'color'; break;

case '5': obj.[4].className = 'color'; break;

}
if (conta == 5) { conta = alert("No limite!"); }
}

span {
padding: 5px;
cursor: pointer;
}

span.color {
color: white;
font-weight: bold;
background-color: dimgray;
}

<center>

<button onclick="ancora(conta--);">&#171 Anterior</button>

 
<span>1</span>

<span>2</span>

<span>3</span>

<span>4</span>

<span>5</span>


<button onclick="ancora(conta++);">Próximo &#187</button>
</center>

You know what this is about, um Pagination effect is what I try to do (only the visual, aesthetic part). In which I am trying to create with Switch/Case

Note that this Switch/Case a click counter has been implemented for direction to take Back or Forward.

Now what I need at the moment is to know stand out only one number at a time of others, as you click in the arrangement of control buttons.

Answer 1

With switch maybe it’s not the best way, but if you’re sure it’ll always be five pages you can do it like this:

var conta = 1;
function span_click(eleIndex) {
    var eles = document.getElementsByTagName('span');
    for(var i in eles) {
        eles[i].className = '';
    }
    eles[eleIndex].className = 'color';
    conta = eleIndex+1;
}
function ancora(count) {

    conta += count;

    var eles = document.getElementsByTagName('span');
    for(var i in eles) {
        eles[i].className = '';
    }
    switch(conta){

    case 1: 	eles[0].className = 'color'; break;

    case 2: 	eles[1].className = 'color'; break;

    case 3: 	eles[2].className = 'color'; break;

    case 4: 	eles[3].className = 'color'; break;

    case 5: 	eles[4].className = 'color'; break;

    }
    if (conta == eles.length + 1) {
        ancora(-conta+1);
    }
    else if(conta < 1) {
        ancora(eles.length);
    }
}

span {
padding: 5px;
cursor: pointer;
}

span.color {
color: white;
font-weight: bold;
background-color: dimgray;
}

<center>

<button onclick="ancora(-1);">&#171 Anterior</button>

 
<span onclick="span_click(0)" class="color">1</span>

<span onclick="span_click(1)">2</span>

<span onclick="span_click(2)">3</span>

<span onclick="span_click(3)">4</span>

<span onclick="span_click(4)">5</span>


<button onclick="ancora(1);">Próximo &#187</button>

</center>

Answer 2

Diego, you can even do switch, but follows a more generic solution.

to this end, all the button of the pagination must contain the property data-panel that must inform the page to be displayed, either directly through a number, or through an instruction (such as next or prev).

the pages themselves will have another attribute, data-index, this will store a number with the page index.

below follows a complete example, with 10 pages and 4 actions (first, previous, next and last).

var panels = document.querySelectorAll("fieldset[data-index]");
var buttons = document.querySelectorAll("button[data-panel]");

var atual = [].filter.call(panels, function (panel, indice) {
  return !panel.classList.contains("hidden");
})[0];

if (!atual) {
  atual = panels[0];
  atual.classList.remove("hidden");  
}

var indice = parseInt(atual.dataset.index);
var ultimo = [].filter.call(buttons, function (button, indice) {
  return button.dataset.panel == atual.dataset.index;
})[0];


ultimo.classList.add("atual");

var onButtonClick = function (event) {
  switch (event.target.dataset.panel) {
    case "first": indice = 1; break;
    case "prev": if (indice > 1) indice--; break;
    case "next": if (indice < panels.length) indice++; break;
    case "last": indice = panels.length; break;
    default: indice = parseInt(event.target.dataset.panel); break;
  }
  
  atual.classList.add("hidden");
  ultimo.classList.remove("atual");
  
  atual = panels[indice - 1];
  ultimo = [].filter.call(buttons, function (button, indice) {
    return button.dataset.panel == atual.dataset.index;
  })[0];
  
  atual.classList.remove("hidden");
  ultimo.classList.add("atual");
};

[].forEach.call(buttons, function (button, indice) {
  button.addEventListener("click", onButtonClick);
});

.hidden {
  display: none;
}

.atual {
  font-weight: bold;
}

<div id="buttons">
  <button data-panel="first">&lt;&lt;</button>
  <button data-panel="prev">&lt;</button>
  <button data-panel="1">1</button>
  <button data-panel="2">2</button>
  <button data-panel="3">3</button>
  <button data-panel="4">4</button>
  <button data-panel="5">5</button>
  <button data-panel="6">6</button>
  <button data-panel="7">7</button>
  <button data-panel="8">8</button>
  <button data-panel="9">9</button>
  <button data-panel="10">10</button>
  <button data-panel="next">&gt;</button>
  <button data-panel="last">&gt;&gt;</button>
</div>
<div id="panels">
   <fieldset data-index="1" class="hidden">
      <legend>Painel 1</legend>
      <div>
         <p>Amet mattis vulputate enim nulla aliquet. Feugiat pretium nibh ipsum consequat nisl vel pretium lectus. Dictum varius duis at consectetur lorem donec massa sapien faucibus. Sagittis vitae et leo duis ut. Et netus et malesuada fames ac. Urna et pharetra pharetra massa massa ultricies mi quis. Dolor magna eget est lorem ipsum dolor sit amet consectetur. Dictum fusce ut placerat orci nulla pellentesque dignissim enim sit. Amet tellus cras adipiscing enim eu turpis. Nullam non nisi est sit. Mauris augue neque gravida in fermentum et. Tellus orci ac auctor augue mauris augue neque gravida in. Congue nisi vitae suscipit tellus mauris. Enim nec dui nunc mattis enim ut.</p>
      </div>
   </fieldset>
   <fieldset data-index="2" class="hidden">
      <legend>Painel 2</legend>
      <div>
         <p>Id porta nibh venenatis cras sed. Ac ut consequat semper viverra nam. Id nibh tortor id aliquet lectus proin nibh nisl condimentum. Nibh venenatis cras sed felis eget velit aliquet. Ac tortor dignissim convallis aenean et tortor at. Diam volutpat commodo sed egestas egestas fringilla. Erat imperdiet sed euismod nisi porta. Consectetur lorem donec massa sapien faucibus. Nam libero justo laoreet sit amet cursus sit amet. Mus mauris vitae ultricies leo. Arcu felis bibendum ut tristique et egestas quis ipsum suspendisse. Aliquet lectus proin nibh nisl condimentum id. Facilisi morbi tempus iaculis urna id. Sit amet cursus sit amet dictum sit.</p>
      </div>
   </fieldset>
   <fieldset data-index="3" class="hidden">
      <legend>Painel 3</legend>
      <div>
         <p>Ut sem nulla pharetra diam sit amet nisl. Feugiat in fermentum posuere urna nec. Purus sit amet luctus venenatis. Nec nam aliquam sem et tortor consequat id. Adipiscing elit ut aliquam purus sit amet luctus venenatis. Nunc congue nisi vitae suscipit. Faucibus turpis in eu mi bibendum neque egestas congue. Quis imperdiet massa tincidunt nunc pulvinar sapien. Convallis a cras semper auctor neque vitae tempus quam. At ultrices mi tempus imperdiet nulla malesuada pellentesque elit eget.</p>
      </div>
   </fieldset>
   <fieldset data-index="4" class="hidden">
      <legend>Painel 4</legend>
      <div>
         <p>Urna nunc id cursus metus aliquam eleifend. Tristique sollicitudin nibh sit amet commodo nulla facilisi nullam. Viverra aliquet eget sit amet tellus cras adipiscing enim. Convallis convallis tellus id interdum velit laoreet id donec. Eu facilisis sed odio morbi quis commodo odio aenean. Nisi scelerisque eu ultrices vitae auctor eu augue ut. Praesent elementum facilisis leo vel. Tellus in hac habitasse platea. Porttitor leo a diam sollicitudin tempor. Massa sed elementum tempus egestas sed sed risus pretium. Consequat ac felis donec et odio. Urna duis convallis convallis tellus. Habitant morbi tristique senectus et netus et malesuada fames. Arcu dui vivamus arcu felis bibendum. Mi bibendum neque egestas congue quisque egestas diam in. Consectetur adipiscing elit pellentesque habitant morbi tristique senectus.</p>
      </div>
   </fieldset>
   <fieldset data-index="5" class="hidden">
      <legend>Painel 5</legend>
      <div>
         <p>Pellentesque dignissim enim sit amet venenatis. Pellentesque habitant morbi tristique senectus et netus. Ultrices eros in cursus turpis massa. Natoque penatibus et magnis dis. A condimentum vitae sapien pellentesque habitant morbi tristique. Convallis convallis tellus id interdum velit laoreet id. Tempus quam pellentesque nec nam aliquam sem. Sed felis eget velit aliquet sagittis id. Id velit ut tortor pretium. Consequat mauris nunc congue nisi vitae suscipit. Quam id leo in vitae turpis. Consectetur purus ut faucibus pulvinar elementum integer enim. At varius vel pharetra vel turpis nunc eget lorem. Tincidunt id aliquet risus feugiat in ante metus. Volutpat diam ut venenatis tellus in metus vulputate. Vitae purus faucibus ornare suspendisse sed nisi lacus. Malesuada fames ac turpis egestas sed.</p>
      </div>
   </fieldset>
   <fieldset data-index="6" class="hidden">
      <legend>Painel 6</legend>
      <div>
         <p>Nisi lacus sed viverra tellus. In cursus turpis massa tincidunt dui ut ornare. Rhoncus dolor purus non enim. Penatibus et magnis dis parturient montes nascetur ridiculus. Magna fermentum iaculis eu non. Adipiscing elit pellentesque habitant morbi tristique. Viverra mauris in aliquam sem. Nullam non nisi est sit. Eget gravida cum sociis natoque penatibus et magnis. Tortor dignissim convallis aenean et tortor at. Libero justo laoreet sit amet. Platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim. Nibh nisl condimentum id venenatis a condimentum vitae. Etiam dignissim diam quis enim lobortis scelerisque fermentum dui faucibus. Tincidunt praesent semper feugiat nibh sed pulvinar. Faucibus scelerisque eleifend donec pretium. Odio aenean sed adipiscing diam donec adipiscing tristique. Non diam phasellus vestibulum lorem sed risus ultricies tristique. Urna nec tincidunt praesent semper feugiat nibh sed pulvinar.</p>
      </div>
   </fieldset>
   <fieldset data-index="7" class="hidden">
      <legend>Painel 7</legend>
      <div>
         <p>Morbi tincidunt augue interdum velit. Sed nisi lacus sed viverra tellus in hac habitasse. Ipsum faucibus vitae aliquet nec ullamcorper. Pharetra convallis posuere morbi leo urna molestie at elementum eu. Auctor elit sed vulputate mi sit amet. Fermentum dui faucibus in ornare quam. Pretium vulputate sapien nec sagittis aliquam. Sed viverra ipsum nunc aliquet. Dolor sit amet consectetur adipiscing elit pellentesque habitant. Sed arcu non odio euismod lacinia at quis risus sed. Amet porttitor eget dolor morbi non. Dignissim convallis aenean et tortor at risus viverra adipiscing. Tempor nec feugiat nisl pretium fusce id velit. Feugiat pretium nibh ipsum consequat nisl vel pretium. Diam volutpat commodo sed egestas. Eget duis at tellus at urna. Sodales neque sodales ut etiam sit amet nisl purus in.</p>
      </div>
   </fieldset>
   <fieldset data-index="8" class="hidden">
      <legend>Painel 8</legend>
      <div>
         <p>Purus ut faucibus pulvinar elementum integer enim neque. Eleifend mi in nulla posuere. Sollicitudin ac orci phasellus egestas tellus rutrum tellus pellentesque eu. Laoreet non curabitur gravida arcu ac tortor dignissim convallis aenean. Ultrices dui sapien eget mi proin sed libero enim sed. Morbi tempus iaculis urna id volutpat. Lorem mollis aliquam ut porttitor leo a diam. Eleifend quam adipiscing vitae proin sagittis nisl rhoncus mattis rhoncus. Pharetra diam sit amet nisl. Sed turpis tincidunt id aliquet risus. Et magnis dis parturient montes. Tincidunt eget nullam non nisi est.</p>
      </div>
   </fieldset>
   <fieldset data-index="9" class="hidden">
      <legend>Painel 9</legend>
      <div>
         <p>Risus sed vulputate odio ut enim blandit. Faucibus purus in massa tempor nec feugiat. Pretium quam vulputate dignissim suspendisse in. Molestie a iaculis at erat. Ut tellus elementum sagittis vitae et leo duis ut. Sit amet consectetur adipiscing elit duis tristique sollicitudin nibh. Ornare quam viverra orci sagittis eu volutpat odio. Adipiscing elit ut aliquam purus sit amet luctus. Dictumst vestibulum rhoncus est pellentesque. Etiam erat velit scelerisque in dictum non consectetur. Lorem dolor sed viverra ipsum. Volutpat blandit aliquam etiam erat velit scelerisque in. Odio pellentesque diam volutpat commodo sed egestas egestas fringilla. Id diam vel quam elementum pulvinar etiam non quam. Aliquam vestibulum morbi blandit cursus risus at ultrices. Varius duis at consectetur lorem donec massa. Facilisis gravida neque convallis a cras semper auctor neque. Tortor vitae purus faucibus ornare suspendisse sed nisi lacus sed. Convallis a cras semper auctor neque. Commodo viverra maecenas accumsan lacus vel facilisis.</p>
      </div>
   </fieldset>
   <fieldset data-index="10" class="hidden">
      <legend>Painel 10</legend>
      <div>
         <p>Morbi tristique senectus et netus et malesuada fames. Habitant morbi tristique senectus et netus. Arcu non odio euismod lacinia at quis. Sed euismod nisi porta lorem. Orci dapibus ultrices in iaculis. Ut enim blandit volutpat maecenas. Purus sit amet luctus venenatis lectus magna. Suspendisse in est ante in nibh mauris cursus mattis. Eleifend quam adipiscing vitae proin sagittis nisl. Iaculis nunc sed augue lacus viverra vitae congue eu. Arcu non odio euismod lacinia at quis risus sed. Aliquam sem fringilla ut morbi tincidunt augue interdum velit euismod. Sed tempus urna et pharetra pharetra massa massa ultricies mi. Semper feugiat nibh sed pulvinar proin. Condimentum mattis pellentesque id nibh tortor.</p>
      </div>
   </fieldset>
</div>