javascript 中的保证金条件

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 默认情况下没有反应）。

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

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。但这对这项任务来说可能有点矫枉过正。

Answer 2

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

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() 函数中
在页面加载和每次单击按钮时检查此功能

感谢 Gustavo 的宝贵帮助！

javascript 中的保证金条件

Margin condition in javascript

javascript

conditional

if-statement