Маржинальное условие в JavaScript - PullRequest
Новая
       8

Маржинальное условие в JavaScript

0 голосов
/ 12 ноября 2018

Я пытаюсь создать слайд-шоу, которое в значительной степени работает, изменяя поля в моем 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, который изменял бы отображение моих кнопок, когда маржа достигает определенного значения.

Было бы замечательно, если бы кто-нибудь мог указать мне правильное направление, поскольку я потратил некоторое время, пытаясь решить эту проблему самостоятельно, но не смог найти правильного решения.

Спасибо за вашу помощь !!

Ответы [ 2 ]

0 голосов
/ 12 ноября 2018

Причина, по которой он не работал, заключалась в том, что я не проверял поля, когда нажимались кнопки. Я изменил свой код следующим образом: 

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() функции
  • Проверьте эту функцию при загрузке страницы и каждый раз, когда нажимаются кнопки

Спасибо Густаво за его драгоценную помощь!

0 голосов
/ 12 ноября 2018

Вы правильно создали логику. Проблема в том, что вы не проверяете поля каждый раз, когда нажимаете кнопку (по умолчанию 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 . Но это может быть излишним для этой задачи.

...