Как зациклить и упростить код нескольких кнопок боковой прокрутки, которые прокручивают определенную строку в JavaScript?

Я новичок в JavaScript, и у меня возникли проблемы при попытке решить, как создать несколько кнопок боковой прокрутки, которые прокручивают определенную строку в JavaScript. Это мой код в JavaScript

const next = document.querySelector('#next');
const back = document.querySelector('#back');
const next1 = document.querySelector('#next1');
const back1 = document.querySelector('#back1');

next.onclick = function () {
  document.querySelector('#con').scrollLeft += 1308;
};
back.onclick = function () {
  document.querySelector('#con').scrollLeft -= 1308;
};
next1.onclick = function () {
  document.querySelector('#con1').scrollLeft += 1308;
};
back1.onclick = function () {
  document.querySelector('#con1').scrollLeft -= 1308;
};

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

🤔 А знаете ли вы, что...
JavaScript позволяет создавать динамические и интерактивные веб-приложения.

[РЕШЕНО]Перейти к решению

Javascript273878 вопросов Loops11581 вопрос Button3313 вопросов Scroll1533 вопроса Overflow525 вопросов

Ответ:

Решено

Нам нужно создать элементы html с некоторой информацией, чтобы достичь того, что вы ищете. Нам понадобится:

классы - один класс для кнопки «Назад», один класс для следующей кнопки
Атрибуты — мы будем использовать атрибуты, чтобы указать, какую строку мы хотим переместить (по идентификатору строки). + Атрибут со значением для прокрутки.

например:

  <div data-row = "con" data-scroll = "1308" class = "nxt_btn">Next</div>
  <div data-row = "con" data-scroll = "1308" class = "bck_btn">Back</div>

  <div data-row = "con1" data-scroll = "1308" class = "nxt_btn">Next</div>
  <div data-row = "con1" data-scroll = "1308" class = "bck_btn">Back</div>

теперь в js мы можем получить все кнопки «Далее» и «Назад» по классам. а затем добавить событие щелчка.

const nxt_btns = document.querySelectorAll(".nxt_btn");
const bck_btns = document.querySelectorAll(".bck_btn");

for (let n_btn of nxt_btns) {
  n_btn.addEventListener("click", () => {
    // getting the row id from attribute
    const row = n_btn.getAttribute("data-row");
     // getting to where to scroll from attribute 
    const to = n_btn.getAttribute("data-scroll");
    
    // adding the action. notice im adding the row with literals `${row}` and im parsing the to value, because it comes as a string and we need it as int (number). 
 document.querySelector(`#${row}`).scrollLeft += parseInt(to, 10);
  });
}

for (let b_btn of bck_btns) {
  b_btn.addEventListener("click", () => {
    const row = b_btn.getAttribute("data-row");
    const to = b_btn.getAttribute("data-scroll");
    document.querySelector(`#${row}`).scrollLeft -= parseInt(to, 10);
  });
}

Вот пример кода и коробки. https://codesandbox.io/p/sandbox/pensive-mendeleev-9j5kzv

Еще одна вещь, которую вы можете сделать, чтобы сделать это в одном цикле, — это добавить еще один атрибут data-dir, установить его next или back и на его основе принять решение о поведении события щелчка. (если хотите, я могу добавить пример, как этого добиться)

Обратите внимание: я поместил весь код в html-файл только для того, чтобы было легче все увидеть и понять. конечно, хорошей практикой является отделение js от html.

Следующее, что вы можете сделать, это создать цикл для генерации html для вас (строки и кнопки - но для этого требуется больше данных, и, вероятно, вам придется задать это как еще один вопрос)

Как зациклить и упростить код нескольких кнопок боковой прокрутки, которые прокручивают определенную строку в JavaScript?

Ответ:

Интересные вопросы для изучения