javascript中的边距条件

我试图通过改变CSS中的边距来构建一个幻灯片。 到目前为止，它运行良好，但我希望下一个和上一个按钮消失时，利润有一定的价值，我无法找到解决办法

以下是我的js代码：

const nextBtn = document.querySelector('#slideNext');
const prevBtn = document.querySelector('#slidePrev');
const slider = document.querySelector('.boxes-container');
const slideWidth = 250;

// Slider initial margin
slider.style.marginLeft = "0";

nextBtn.onclick = function() {
  slider.style.marginLeft = (parseInt(slider.style.marginLeft, 0) - slideWidth) + 'px';
}

prevBtn.onclick = function() {
  slider.style.marginLeft = (parseInt(slider.style.marginLeft, 0) + slideWidth) + 'px';
}

if (slider.style.marginLeft == "0") {
  prevBtn.style.display = "none";
} else if (slider.style.marginLeft == "-1000px") {
  nextBtn.style.display = "none";
} else {
  nextBtn.style.display = "inline-block";
  prevBtn.style.display = "inline-block";
}

我的问题是在最后一部分：我不知道如何处理一个if/else语句，它会在边距达到某个值时修改按钮的显示

如果有人能给我指出正确的方向，那就太棒了，因为我花了一些时间试图自己解决这个问题，但却找不到正确的解决方案

---

谢谢你的帮助

您正确创建了逻辑。问题在于，您没有在每次单击按钮时检查边距（javascript在默认情况下不是被动的）

您必须将边距逻辑封装到函数中，然后每次单击按钮时检查边距值

const nextBtn = document.querySelector('#slideNext');
const prevBtn = document.querySelector('#slidePrev');
const slider = document.querySelector('.boxes-container');
const slideWidth = 250;

// Slider initial margin
slider.style.marginLeft = "0";

nextBtn.onclick = function() {
  slider.style.marginLeft = (parseInt(slider.style.marginLeft, 0) - slideWidth) + 'px';
  checkMargin();
}

prevBtn.onclick = function() {
  slider.style.marginLeft = (parseInt(slider.style.marginLeft, 0) + slideWidth) + 'px';
  checkMargin();
}

function checkMargin() {
    if (slider.style.marginLeft == "0") {
      prevBtn.style.display = "none";
    } else if (slider.style.marginLeft == "-1000px") {
      nextBtn.style.display = "none";
    } else {
      nextBtn.style.display = "inline-block";
      prevBtn.style.display = "inline-block";
    }
}

---

还有其他方法可以使DOM反应，如。但是这项任务可能做得太过火了。

它不起作用的原因是我在单击按钮时没有检查边距。 我更改了代码如下：

const nextBtn = document.querySelector('#slideNext');
const prevBtn = document.querySelector('#slidePrev');
const slider = document.querySelector('.boxes-container');
const slideWidth = 250;

// Slider initial margin
slider.style.marginLeft = "0px";

function check() {
  if (slider.style.marginLeft == "0px") {
    prevBtn.style.display = "none";
  } else if (slider.style.marginLeft == "-1000px") {
    nextBtn.style.display = "none";
  } else {
    nextBtn.style.display = "inline-block";
    prevBtn.style.display = "inline-block";
  }
}

window.onload = check(); // Check the margins when the page is loaded

nextBtn.onclick = function() {
  slider.style.marginLeft = (parseInt(slider.style.marginLeft, 0) - slideWidth) + 'px';
  check();
}

prevBtn.onclick = function() {
  slider.style.marginLeft = (parseInt(slider.style.marginLeft, 0) + slideWidth) + 'px';
  check();
}

• 将边距逻辑包装在

  check（）函数中

• 在页面加载和每次单击按钮时检查此功能

---

感谢古斯塔沃的宝贵帮助

最后一部分似乎有什么问题？if/else语句有什么不起作用？对不起，我不是很清楚。问题是按钮不能切换状态，这意味着您可以继续单击它并添加边距。我认为问题在于if语句只运行一次，而不是每次边距更新时都运行。我建议您将这段代码添加到函数中，然后在每次单击nextBtn或prevBtn时（当边距更改时）运行这些检查。