Почему использование «> =» не работает в следующем примере, почему мы должны использовать «-1»? - PullRequest
Новая
       1

Почему использование «> =» не работает в следующем примере, почему мы должны использовать «-1»?

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

Так что я просто изучаю и практикую Javascript, а также библиотеки javascript. В этом примере я работаю с JQuery. Этот пример - простой ротатор цитат (меняйте его как хотите). Код работает отлично. Моя проблема связана с оператором if в анонимной функции (в методе fadeOut). аргумент в операторе if: 

currentQuote == allQuotes.length - 1

почему он должен быть написан так вместо 

currentQuote >= allQuotes.length

не должен использовать больше или равно, чтобы работать точно так жепуть? И если нет, то почему? Весь код следует ниже.

// HTML 

<body>
  <div class="quote-holder">
    <blockquote>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do 
    </blockquote>
    <blockquote>
     Ut enim ad minim veniam, quis nostrud exercitation ullamco 
    </blockquote>
    <blockquote>
      Duis aute irure dolor in reprehenderit in voluptate velit esse 
    </blockquote>
  </div>
</body>

// CSS 

.quote-holder {
  width: 30%;
}

blockquote {
  display: none;
}

blockquote:first-of-type {
  display: block;
}

// javascript Jquery 

let allQuotes = $("blockquote");
let currentQuote = 0;

function changeQuote(){
  $(allQuotes[currentQuote]).fadeOut(200, function(){if(currentQuote == allQuotes.length - 1){
    currentQuote = 0;
  }else {
    currentQuote++;
  }
    $(allQuotes[currentQuote]).fadeIn(200)});


}

let quoteTimer = setInterval(changeQuote, 3000)

1 Ответ

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

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

Если длина массива равна 5. Позиции: [0], [1], [2], [3], [4], поэтому 4 - это последний элемент, который:

array.length - 1.

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

let allQuotes = $("blockquote");
let currentQuote = 0;

function changeQuote(){
  $(allQuotes[currentQuote]).fadeOut(200, function(){
  if(currentQuote == allQuotes.length - 1){ //if last position
    currentQuote = 0; //reset
  }else { //else 
    currentQuote++; // go next
  }
    $(allQuotes[currentQuote]).fadeIn(200)});


}

let quoteTimer = setInterval(changeQuote, 3000)
.quote-holder {
  width: 30%;
}

blockquote {
  display: none;
}

blockquote:first-of-type {
  display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
  <div class="quote-holder">
    <blockquote>
      Hello 
    </blockquote>
    <blockquote>
     How are you? 
    </blockquote>
    <blockquote>
      Good Thanks 
    </blockquote>
  </div>
</body>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...