Question

所以我只是在学习和练习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)

Answer 1

因为只要数组位置到达末尾，循环都需要重置。否则，它将始终显示第一个位置。

如果数组长度为5，则位置为[0]，[1]，[2]，[3]，[4]，因此 4 是最后一个元素，它是：< / p>

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>

在下面的示例中，为什么不使用“> =”不起作用，为什么我们必须改为使用“ -1”？

1 个答案: