MikeStardust MikeStardust - 7 months ago 17
Javascript Question

Switch variable issue

While working on what can be called a "content slider" i wrote this piece of code up:



var dayy = 1;

$(".buttonSix").click(function() {
dayy--;
console.log(dayy);
});

$(".buttonSeven").click(function() {
dayy++;
console.log(dayy);
});


switch (dayy) {
case 0:
var dayy = 1;
break;
case 1:
break;
case 2:
$(".fist").fadeOut();
$(".second").fadeOut();
$(".third").fadeIn();
$(".fourth").fadeIn();
break;
case 3:
$(".third").fadeOut();
$(".fourth").fadeOut();
$(".fith").fadeIn();
$(".sicth").fadeIn();
break;
case 4:
$(".fith").fadeOut();
$(".sicth").fadeOut();
$(".seventh").fadeIn();
$(".eight").fadeIn();
break;
case 5:
$(".seventh").fadeOut();
$(".eight").fadeOut();
$(".nineth").fadeIn();
$(".tenth").fadeIn();
break;
case 6:
$(".nineth").fadeOut();
$(".tenth").fadeOut();
$(".eleventh").fadeIn();
$(".twelve").fadeIn();
break;
case 7:
$(".eleventh").fadeOut();
$(".twelve").fadeOut();
$(".thirteenth").fadeIn();
$(".fourteenth").fadeIn();
break;
default:
$(".thirteenth").fadeOut();
$(".fourteenth").fadeOut();
$(".first").fadeIn();
$(".second").fadeIn();
var dayy = 1;
break;

}





all the html divs have display none, except for first and second that are visible.
the increments are being logged and work but the switch isn't working.

no console errors are being logged

all help and comments are appreciated,
Thank you very much in advance

Answer

Your switch is not call after a click, it should be :

var dayy = 1;

    $(".buttonSix").click(function() {
      switchDayy(--dayy);
    });

    $(".buttonSeven").click(function() {
      switchDayy(++dayy)
    });

function switchDayy(dayy){
    switch (dayy) {
      case 0:
        var dayy = 1;
        break;
      case 1:
        break;
      case 2:
        $(".fist").fadeOut();
        $(".second").fadeOut();
        $(".third").fadeIn();
        $(".fourth").fadeIn();
        break;
      case 3:
        $(".third").fadeOut();
        $(".fourth").fadeOut();
        $(".fith").fadeIn();
        $(".sicth").fadeIn();
        break;
      case 4:
        $(".fith").fadeOut();
        $(".sicth").fadeOut();
        $(".seventh").fadeIn();
        $(".eight").fadeIn();
        break;
      case 5:
        $(".seventh").fadeOut();
        $(".eight").fadeOut();
        $(".nineth").fadeIn();
        $(".tenth").fadeIn();
        break;
      case 6:
        $(".nineth").fadeOut();
        $(".tenth").fadeOut();
        $(".eleventh").fadeIn();
        $(".twelve").fadeIn();
        break;
      case 7:
        $(".eleventh").fadeOut();
        $(".twelve").fadeOut();
        $(".thirteenth").fadeIn();
        $(".fourteenth").fadeIn();
        break;
      default:
        $(".thirteenth").fadeOut();
        $(".fourteenth").fadeOut();
        $(".first").fadeIn();
        $(".second").fadeIn();
        var dayy = 1;
        break;

    }
}
Comments