Как повторно использовать кусок Javascript несколько раз на одной странице - PullRequest
Новая
       85

Как повторно использовать кусок Javascript несколько раз на одной странице

0 голосов
/ 21 июня 2020

Я новичок в создании веб-сайтов, и у меня есть (вероятно, довольно базовый c) вопрос об использовании функции Javascript, написанной для слайд-шоу. У меня есть одностраничный веб-сайт, который использует несколько единиц слайд-шоу - состоящих из блока слайд-шоу, держателя и счетчика (например, 1/4), все из которых контролируются следующим js: 

var currentSlide = 0
var totalSlides = $('.holder div').length

var nextSlide = function() {
console.log('nextSlide')
currentSlide = currentSlide + 1

if (currentSlide >= totalSlides) {
    currentSlide = 0
}

var leftPosition = (-currentSlide * 100) + 'vw'
$('.holder').css('left', leftPosition)

var slideNumber = currentSlide + 1
$('.steps').text(slideNumber + '/' + totalSlides)
}


var prevSlide = function() {

  currentSlide = currentSlide - 1


if (currentSlide < 0) {
  currentSlide = totalSlides - 1
}


var leftPosition = (-currentSlide * 100) + 'vw'
$('.holder').css('left', leftPosition)

var slideNumber = currentSlide + 1
$('.steps').text(slideNumber + '/' + totalSlides)

}

var autoSlide = setInterval(function() {
  nextSlide()
}, 100000000)

$('.next').on('click', function() {
  clearInterval(autoSlide)
  nextSlide()
})

$('.prev').on('click', function() {
  clearInterval(autoSlide)
  prevSlide()
})


var slideNumber = currentSlide + 1
$('.steps').text(slideNumber + '/' + totalSlides)

$('body').on('keydown', function(event) {

  var keyCode = event.keyCode

  if (keyCode == 37) {
    clearInterval(autoSlide)
    prevSlide()
  }

  if (keyCode == 39) {
    clearInterval(autoSlide)
    nextSlide()
  }

})

Моя установка в HTML такова: 

<main class="scroll-container">
         <section id="project-1" class="toxic-yellow">
         <div class="slideshow">
           <div class="holder">
             <div class="slide-1 image next"><img src="images/01.jpg"></div>
             <div class="slide-2 image next">
               <p class="project-text">
                 Project 1, 3D, 2020<br>
                 Insert the project text here insert the project text here insert the project text here insert the project text here insert the project text here
               </p>
             </div>
             <div class="slide-3 image next"><img src="images/05.jpg"></div>
             <div class="slide-4 image next"><img src="images/02.jpg"></div>
             <div class="slide-5 image next"><img src="images/04.jpg"></div>
             <div class="slide-6 image next"><img src="images/06.jpg"></div>
           </div>
         </div>
           <p class="caption">Project 1</p>
           <p class="steps"></p>
         </section>
         <section id="project-2" class="lilac">
         <div class="slideshow">
           <div class="holder">
             <div class="slide-1 image next"><img src="images/05.jpg"></div>
             <div class="slide-2 image next">
               <p class="project-text">
                 Project 1, 3D, 2020<br>
                 Insert the project text here insert the project text here insert the project text here insert the project text here insert the project text here
               </p>
             </div>
             <div class="slide-3 image next"><img src="images/05.jpg"></div>
             <div class="slide-4 image next"><img src="images/02.jpg"></div>
             <div class="slide-5 image next"><img src="images/04.jpg"></div>
             <div class="slide-6 image next"><img src="images/06.jpg"></div>
           </div>
         </div>
           <p class="caption">Project 2</p>
           <p class="steps"></p>
         </section>

И так далее. Всего у меня на одной странице 12 слайд-шоу. Проблема, с которой я сталкиваюсь, заключается в том, что сценарий применяется глобально ко всей странице, но я хотел бы управлять каждым слайд-шоу независимо друг от друга. Есть ли способ повторно использовать этот сценарий и применять его отдельно к каждому экземпляру слайд-шоу?

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

Ответы [ 2 ]

0 голосов
/ 21 июня 2020 
$('body').on('keydown', function(event)

Этим вы применяете изменения ко всем элементам.

Судя по вашему коду, вы можете запустить прослушиватель событий, чтобы изменить слайды только на дочерние элементы родительского элемента (section), который имеет идентификатор «project-X». Посмотрите здесь

0 голосов
/ 21 июня 2020

Вы можете использовать JavaScript функции или классы.

Справочные функции W3Schools

Справочные классы W3Schools

...