javascript - javascript中的 margin 条件

Question

我正在尝试通过更改我的 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 语句，该语句会在边距达到特定值时修改我的按钮的显示。

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

感谢您的帮助!

Answer 1

您正确地创建了逻辑。问题是每次单击按钮时您都不会检查边距(默认情况下 javascript 不是响应式(Reactive)的)。

您必须将边距的逻辑包装到一个函数中，然后在每次单击按钮时检查边距值。

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 具有响应性，例如 MutationObserver .但这对这项任务来说可能有点矫枉过正。