javascript - 切换变量问题

Question

在研究所谓的“内容 slider ”时，我编写了这段代码:

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

除了第一个和第二个可见之外，所有 html div 都不显示。 增量正在被记录并起作用，但开关不起作用。

没有记录任何控制台错误

感谢所有帮助和评论， 预先非常感谢您

Answer 1

您的开关不是在点击后调用的，它应该是:

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;

    }
}