Как получить эту кнопку для запуска соответствующего события - PullRequest
Новая
       10

Как получить эту кнопку для запуска соответствующего события

0 голосов
/ 28 сентября 2019

Я пытаюсь сделать мой слайдер интерактивным на тесте, над которым я работаю, и я просто не могу понять это.У меня есть некоторый код, который я использовал из W3, но я пытаюсь добавить пару событий для кнопок, чтобы все это было в собственном файле javascript вместо встроенного в HTML.

Вот HTML:

<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<script src="main.js" defer></script>

<body>

<h2 class="w3-center">Manual Slideshow</h2>

<div class="w3-content w3-display-container">
  <img class="mySlides" src="./image_1.jpg" style="width:100%">
  <img class="mySlides" src="./image_2.jpg" style="width:100%">
  <img class="mySlides" src="./image_3.jpg" style="width:100%">

  <button id="clicker" class="w3-button w3-black w3-display-left">&#10094;</button>
  <button id="clicker" class="w3-button w3-black w3-display-right">&#10095;</button>
</div>

</body>
</html>

Вот Javascript: 

let leftSlideButton = document.getElementById("clicker");
let rightSlideButton = document.getElementById("clicker");

var slideIndex = 1;
showDivs(slideIndex);

function plusDivs(n) {
  showDivs(slideIndex += n);
}

function showDivs(n) {
  var i;
  var x = document.getElementsByClassName("mySlides");
  if (n > x.length) {slideIndex = 1}
  if (n < 1) {slideIndex = x.length}
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";  
  }
  x[slideIndex-1].style.display = "block";  
}

let slideForward = plusDivs(1);
let slideBack = plusDivs(-1);

leftSlideButton.onclick = slideBack;
rightSlideButton.onclick = slideForward;

Слайдер работал, когда скрипт был встроен в hmtl, но когда я пытался написать некоторые функции для кнопок в их собственном javascriptфайл это просто перестает работать, и я сейчас в замешательстве.Iv'e добавил их в свою переменную и взял его HTML-селектор, чтобы я мог добавить обработчик событий и связать его с функцией, но он просто не работает.Любая помощь будет оценена.

Кроме того, это мой первый пост, поэтому извиняюсь, если я не отформатировал его правильно.

TIA, Neil.

Ответы [ 3 ]

0 голосов
/ 28 сентября 2019

У вас есть несколько проблем:

Во-первых, кнопка выбора.Вы пытаетесь получить 2 кнопки с одинаковым идентификатором, вы должны изменить это.

Затем эти две строки: 

let slideForward = plusDivs(1);
let slideBack = plusDivs(-1);

plusDivs(1) и plusDivs(-1) вызываютфункция и возвращающая значение.Чтобы исправить это, вы можете создать анонимную функцию (или функцию стрелки) для вызова plusDivs

Вот фиксированная версия (я изменил ширину изображений до 25%, чтобы было легче увидетьво фрагменте): 

let leftSlideButton = document.getElementById("clickerLeft");
let rightSlideButton = document.getElementById("clickerRight");

var slideIndex = 1;
showDivs(slideIndex);

function plusDivs(n) {
  showDivs(slideIndex += n);
}

function showDivs(n) {
  var i;
  var x = document.getElementsByClassName("mySlides");
  if (n > x.length) {slideIndex = 1}
  if (n < 1) {slideIndex = x.length}
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";  
  }
  x[slideIndex-1].style.display = "block";  
}


leftSlideButton.onclick = () => plusDivs(1);
rightSlideButton.onclick = () => plusDivs(-1);
<h2 class="w3-center">Manual Slideshow</h2>

<div class="w3-content w3-display-container">
  <img class="mySlides" src="https://via.placeholder.com/150" style="width:25%">
  <img class="mySlides" src="https://via.placeholder.com/200" style="width:25%">
  <img class="mySlides" src="https://via.placeholder.com/250" style="width:25%">

  <button id="clickerLeft" class="w3-button w3-black w3-display-left">&#10094;</button>
  <button id="clickerRight" class="w3-button w3-black w3-display-right">&#10095;</button>
</div>
0 голосов
/ 28 сентября 2019

У вас не может быть двух одинаковых идентификаторов, поэтому я назначил отдельным идентификаторам кнопок, а затем прикрепил прослушиватель событий к каждому с помощью addEventListener.Внутри каждого слушателя я добавил функцию plusDivs() непосредственно в. 

let leftSlideButton = document.getElementById("clicker-left");
let rightSlideButton = document.getElementById("clicker-right");

var slideIndex = 1;
showDivs(slideIndex);

function plusDivs(n) {
  showDivs(slideIndex += n);
}

function showDivs(n) {
  var i;
  var x = document.getElementsByClassName("mySlides");
  if (n > x.length) {slideIndex = 1}
  if (n < 1) {slideIndex = x.length}
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";  
  }
  x[slideIndex-1].style.display = "block";  
}

leftSlideButton.addEventListener("click",  () => {plusDivs(1)});
rightSlideButton.addEventListener("click", () => {plusDivs(-1)});
.w3-content > img{
   max-height: 200px;
   object-fit: contain;
   background-color: lightblue;
}
<h2 class="w3-center">Manual Slideshow</h2>

<div class="w3-content w3-display-container">
  <img class="mySlides" src="http://placekitten.com/100/200" style="width:100%">
  <img class="mySlides" src="http://placekitten.com/200/200" style="width:100%">
  <img class="mySlides" src="http://placekitten.com/150/200" style="width:100%">

  <button id="clicker-left" class="w3-button w3-black w3-display-left">&#10094;</button>
  <button id="clicker-right" class="w3-button w3-black w3-display-right">&#10095;</button>
</div>
0 голосов
/ 28 сентября 2019

Скорее всего, проблема вызвана 2 x id="clicker".Использование уникальных идентификаторов для кнопок должно решить проблему.

Далее, поскольку глобальное объявление slideIndex не требует промежуточного программного обеспечения plusDivs.

Я бы такжеПредлагаем использовать более понятные имена функций и переменных для лучшей читабельности.Проверьте это: slideDivs против showDivs, step против n, slides против x и т. Д. Возможно, на данном примере это не кажется чем-то особенным, но это хорошая привычкаи сэкономит вам много времени при работе над большими проектами.

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

var visibleSlideIndex = 0;
var slides = document.getElementsByClassName("mySlides");

function slideDivs(step) {
    visibleSlideIndex = (visibleSlideIndex + step + slides.length) % slides.length;
    for (let index = 0; index < slides.length; index++) {
        slides[index].style.display = visibleSlideIndex === index ? "block" : "none";
    }
}

document.getElementById("slideLeftBtn").onclick = () => slideDivs(1);
document.getElementById("slideRightBtn").onclick = () => slideDivs(-1);
slideDivs(0);
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<script src="main.js" defer></script>

<body>

<h2 class="w3-center">Manual Slideshow</h2>

<div class="w3-content w3-display-container">
	<img class="mySlides" src="./image_1.jpg" style="background-color: red;">
	<img class="mySlides" src="./image_2.jpg" style="background-color: green;">
	<img class="mySlides" src="./image_3.jpg" style="background-color: blue;">
  
	<button id="slideLeftBtn" class="w3-button w3-black w3-display-left">&#10094;</button>
	<button id="slideRightBtn" class="w3-button w3-black w3-display-right">&#10095;</button>
</div>

</body>
</html>
...