Функция Jquery не добавляет класс к элементам Dom, когда это должно быть.Попытка построить функцию слайд-шоу кнопки - PullRequest
Новая
       24

Функция Jquery не добавляет класс к элементам Dom, когда это должно быть.Попытка построить функцию слайд-шоу кнопки

0 голосов
/ 15 апреля 2019

Я пытаюсь создать слайд-шоу для проекта.

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

При нажатии кнопки «Далее» удаляется активный класс из текущего изображения, добавляется этот класс к следующему изображению и изменяется отображение на новое активное изображение.

Когда вы нажимаете предыдущий, он удаляет активный класс, но не добавляет никаких классов к другим элементам. Затем он по какой-то причине меняет отображение на окончательное изображение.

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

var activeSlide = $('.active');
var nextSlide = activeSlide.next('.slide');
var prevSlide = activeSlide.prev('.slide');
var arrow = $('.arrow');
var firstSlide = $('.first');
var lastSlide = $('.last');

// slideshow functions

// next arrow
function nextArrow () {
  if (!activeSlide.hasClass('last')) {
            activeSlide.removeClass('active');
            nextSlide.addClass('active');
            activeSlide = nextSlide;
            nextSlide = activeSlide.next('.slide');
            // check if new slide is last slide and remove the click button
            if (activeSlide.hasClass('last')) {
                $('.next').fadeOut();   
            }
        }  
};
// previous arrow
function prevArrow () {
    if(!activeSlide.hasClass('first')) {
        activeSlide.removeClass('active');
        prevSlide.addClass('active');
        activeSlide = prevSlide;
        prevSlide = activeSlide.prev('.slide');
        // check if new slide is the first slide and remove the click button
        if (activeSlide.hasClass('first')) {
            $('.previous').fadeOut();
        }
    } 
};

//click element and call functions
$('.arrow').click( function () {
    if ($(this).hasClass('next')) {
        nextArrow();
    } else {
        prevArrow();        
    }
});
#slideshow {
    position: relative;
    height: 400px;  
    width: 600px;
    margin: 15% auto;
}
.slide {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 8;
    height: 100%;
    width: 100%;
}
.active {
    z-index: 10;
}
.arrow {
    text-decoration: none;
    display: inline-block;
    padding: 8px 16px;
}
.arrow:hover {
    background-color: #ddd;
    color: black;
    opacity: 0.9;
    cursor: pointer;
}
.previous {
    left: 0;
}

.next {
    right: 0;
}
.arrow {
    z-index: 11;
    background-color: #ddd;
    color: black;
    position: absolute;
    top: 50%;
    opacity: 0.5;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="slideshow">
        <div id="slides">
            <img class="slide active first" src="Toscana 1.jpg" alt="image of toscana, slideshow image 1" />
            <img class="slide" src="Toscana 2.jpg" alt="image of toscana, slideshow image 1" />
            <img class="slide" src="Toscana 3.jpg" alt="image of toscana, slideshow image 2" />
            <img class="slide last" src="Toscana 4.jpg" alt="image of toscana, slideshow image 3" />
        </div>
        <div class="previous arrow">&#8249;</div>
        <div class="next arrow">&#8250;</div>
    </div>
    <script src="javascript/practice.js"></script>

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

Очень ценю помощь в понимании того, что происходит, если кто-то вообще может помочь.

Ответы [ 3 ]

0 голосов
/ 15 апреля 2019

Вы зависите от глобальных переменных, чтобы поддерживать состояние вашей программы, но не всегда удается сохранить состояние переменных в соответствии с состоянием DOM.

Вероятно, лучше использовать DOM в качестве единственного источника правды: «активный» слайд - это тот узел, который в данный момент имеет «активный» класс, и вы можете вычислить следующий и предыдущий на основе его позиции.

Для этого также потребовалось немного поработать над видимостью кнопки «следующий» / «предыдущий»: вы скрывали кнопки в конце и в начале диапазона, но никогда не возвращали их назад; Вам также необходимо загрузить с отключенной кнопкой «предыдущая». 

//No global variables. Use $('.active') to determine the currently active slide

// next arrow
function nextArrow() {
  var activeSlide = $('.active');
  if (activeSlide.hasClass('last')) return; // bail if the user managed to click the 'next' button while it was fading out

  activeSlide.removeClass('active');
  activeSlide.next().addClass('active');
  // $('.active') is now the "next" slide
  if ($('.active').hasClass('last')) { 
    $('.next').fadeOut();
  } 
  
  // Always bring back the "previous" button when user hits next:
  $('.previous').fadeIn(); 
};

// previous arrow
function prevArrow() {
  var activeSlide = $('.active');
  if (activeSlide.hasClass('first')) return;
  activeSlide.removeClass('active');
  activeSlide.prev().addClass('active');
  if ($('.active').hasClass('first')) {
    $('.previous').fadeOut();
  }
  $('.next').fadeIn();
};

//click element and call functions
// removing the unnecessary intermediate function here:
$('.next').click(nextArrow)
$('.previous').click(prevArrow)
#slideshow {
  position: relative;
  height: 200px;
  width: 300px;
  margin: 15% auto;
}

.slide {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 8;
  height: 100%;
  width: 100%;
}

.active {
  z-index: 10;
}

.arrow {
  text-decoration: none;
  display: inline-block;
  padding: 8px 16px;
}

.arrow:hover {
  background-color: #ddd;
  color: black;
  opacity: 0.9;
  cursor: pointer;
}

.previous {
  left: 0;
  display:none;
}

.next {
  right: 0;
}

.arrow {
  z-index: 11;
  background-color: #ddd;
  color: black;
  position: absolute;
  top: 50%;
  opacity: 0.5;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="slideshow">
  <div id="slides">
    <img class="slide active first" src="https://placehold.it/600x400" alt="image of toscana, slideshow image 1" />
    <img class="slide" src="https://placehold.it/601x401" alt="image of toscana, slideshow image 2" />
    <img class="slide" src="https://placehold.it/602x402" alt="image of toscana, slideshow image 1" />
    <img class="slide last" src="https://placehold.it/603x403" alt="image of toscana, slideshow image 1" />
  </div>
  <div class="previous arrow">&#8249;</div>
  <div class="next arrow">&#8250;</div>
</div>
0 голосов
/ 15 апреля 2019

вы можете попробовать класс $ ('. Active'); 

        if(!activeSlide.hasClass('first')) {

            var currentSlide = $('.active');
            var prevSlide = currentSlide.prev();

             currentSlide.removeClass('active');
             prevSlide.addClass('active');
0 голосов
/ 15 апреля 2019

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

например, слайд 1 = текущий слайд, слайд 2 = о том, чтобы быть активным, слайд 3 = о том, чтобы быть следующим

операция нажатия на следующую стрелку должна быть:

  1. установить prevSlide на current-slide (это действие не происходит)
  2. установить activeSlide на следующий слайд
  3. установить для nextSlide значение next-slide.next

аналогично в предыдущей стрелке, вам нужно установить nextSlide

...