javascript - JS 脚本 - if 语句忽略 jQuery 代码

Question

我正在尝试为网页构建自己的 slider ，因为我不想使用 Bootstrap slider 。但是现在我遇到了 if 语句忽略我的 jQuery 动画的问题。

// SLIDER

$(".dot").click(function(){
  let currentId = ($(".dot-active").attr("id")[$(".dot-active").attr("id").length - 1]);
  let nextId = event.target.id[(event.target.id).length - 1];

  $(".dot-active").removeClass("dot-active");
  $("#" + event.target.id).addClass("dot-active");

  if(Number(currentId) < Number(nextId)){
    $("#slide" + currentId).hide("slide", { direction: "left" }, 350);
  } else {
    $("#slide" + currentId).hide("slide", { direction: "right" }, 350);
  };
  $("#slide" + currentId).addClass("slide-inactive");
  $("#slide" + currentId).removeClass("slide-active");

  if(Number(currentId) < Number(nextId)){
    $("#slide" + currentId).hide("slide", { direction: "right" }, 350);
  } else {
    $("#slide" + currentId).hide("slide", { direction: "left" }, 350);
  };
  $("#slide" + nextId).removeClass("slide-inactive");
  $("#slide" + nextId).addClass("slide-active");
});

我尝试将警报放入 if 语句中并且它有效，因此它可能无法识别 jQuery 代码行。另外，如果没有 if 语句，动画效果也很好。请问有人知道为什么吗？

还有一个问题:当我在第一次点击事件上运行此代码而不使用 if 语句(只有一个滑动方向)时，第一个动画不起作用，之后每个动画都正常工作，有人知道为什么吗？

谢谢

Answer 1

我那里有错误，我的错。在这里修复它

// SLIDER

$(".dot").click(function(){
  let currentId = ($(".dot-active").attr("id")[$(".dot-active").attr("id").length - 1]);
  let nextId = event.target.id[(event.target.id).length - 1];

  $(".dot-active").removeClass("dot-active");
  $("#" + event.target.id).addClass("dot-active");

  if(Number(currentId) < Number(nextId)){
  $("#slide" + currentId).hide("slide", { direction: "left" }, 350);
  } else {
    $("#slide" + currentId).hide("slide", { direction: "right" }, 350);
  };
  $("#slide" + currentId).addClass("slide-inactive");
  $("#slide" + currentId).removeClass("slide-active");

  if(Number(currentId) < Number(nextId)){
  $("#slide" + nextId).show("slide", { direction: "right" }, 350);
  } else {
    $("#slide" + nextId).show("slide", { direction: "left" }, 350);
  };
  $("#slide" + nextId).removeClass("slide-inactive");
  $("#slide" + nextId).addClass("slide-active");
});