Question

我在网上发现了一个基本的JQuery轮播，并且好奇它为什么会起作用，在我看来，根据处理变量的时间，它可能不应该有。

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
<style>
.carousel div {
    position:absolute;
    z-index: 0;
}
.carousel div.previous {
    z-index: 1;
}
.carousel div.current {
    z-index: 2;
}

.navicon{
width:50px;
height: 50px;   
}

</style>
</head>
<body><script   src="https://code.jquery.com/jquery-2.2.4.js"   integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI="   crossorigin="anonymous"></script>


<div class = "carousel">
  <div class = "current"><img src="http://placehold.it/500x500" alt=""></div>
  <div><img src="http://placehold.it/501x501" alt=""></div>
  <div><img src="http://placehold.it/502x502" alt=""></div>
  <div><img src="http://placehold.it/503x503" alt=  ""></div>
</div>
</body>
</html>

JavaScript的：

  $(function(){
    setInterval(rotateImages, 3000);


  });

  function rotateImages(){
    var currentPhoto = $('.carousel div.current');
    var nextPhoto = currentPhoto.next();
    if (nextPhoto.length == 0){
      nextPhoto = $('.carousel div:first-of-type')
    }
//Point A

  currentPhoto.removeClass('current').addClass('previous');
//Point B
  nextPhoto.css({ opacity: 0.0 }).addClass('current')
            .animate( {opacity: 1.0}, 1000, function(){
            currentPhoto.removeClass('previous')
            });
  };

我对变量设置的意思是JavaScript何时将变量设置为，在这种情况下，将变量nextPhoto设置为某个选择器，即：前面的div。

我的困惑源于这样一个事实：如果在B点JavaScript将选择器设置在那里，那么方程式将不起作用，因为在上一步中，您已经删除了具有类＆＃34; current＆＃34;的元素，因此当JavaScript绑定设置变量nextPhoto时，它不应该能够找到任何东西，因为在那个时间点，没有类当前的元素，因此没有前面的元素（nextPhoto = currentPhoto.next（））。

如果它在A点是有意义的，但是我想知道JavaScript在什么时候设置变量，以便我可以设计方程式。如果你可以通过上面的代码告诉我并写出JS设置变量哪个点很棒！

Answer 1

一旦完成第一项任务：

var currentPhoto =...

currentPhoto是选择器状态的时间点快照。对集合的未来更改不会改变该集合。除非您明确更改currentPhoto本身的内容（不是深层数据），否则.next（）调用将拉出下一个项目，无论如何。

nextPhoto将获得分配的新类，但选择器本身已经运行。

Answer 2

当赋值运算符currentPhoto将它们设置为某个值时，会分配

nextPhoto和=。在这种情况下，rotateImages函数的前两行。

Answer 3

JavaScript将变量存储为数据容器。

一旦DOM准备就绪， currentPhoto 和 nextPhoto 已经设置并存储到已定义的名称中，因为 = ，如下所示

 var currentPhoto = $('.carousel div.current'); #-> This element knows it's current
 var nextPhoto = currentPhoto.next(); #-> This element knows it's next in line

下面仅通过将图像堆叠从当前（z-index = 3）更改为 previous（z-index = 2）来更改curent div的类状态。下一行div状态仍处于 nextPhoto 状态。

 currentPhoto.removeClass('current').addClass('previous');

在nextPhoto完整状态下，它仍然在等待其操作说明设置为 class =＆＃39;当前＆＃39; 并且发生在这里：

 nextPhoto.css({ opacity: 0.0 }).addClass('current')
        .animate( {opacity: 1.0}, 2000, function(){
        currentPhoto.removeClass('previous')
        });
 };

要真正看到这一点。更改 setInterval（从3000到7000）并更改动画（从1000到2000）。然后运行您的脚本并通过chrome检查器观察它。

增加时间会让你看到那些设定的变量。

Answer 4

我认为你对实际对象与具有特定类的对象有点混淆。在您指示“A点”的下方，您只是从currentPhoto对象中删除一个类。您没有删除该对象。它仍然存在于整个方法中，它不再具有“当前”类。阅读下面的评论。这是事情执行的顺序，应该彻底解释。

$(function(){ // when the document is ready do the following:
    setInterval(rotateImages, 3000); // every 3000 ms do rotateImages
  });

  function rotateImages(){

    // create a variable for currentPhoto which is an object in .carousel that
    // is a div with class current
    var currentPhoto = $('.carousel div.current');

    // create a variable for nextPhoto which is the next sibling to 
    // currentPhoto which you just set.
    var nextPhoto = currentPhoto.next();

    // if there is no next photo, currentPhoto must be the last one, so set
    // nextPhoto to the first photo so the carousel loops.
    if (nextPhoto.length == 0){
      nextPhoto = $('.carousel div:first-of-type')
    }

    // the next line removes the current class and adds the class previous
    // keep in mind that the object is still currentPhoto though, regardless
    // of what classes it has.
    currentPhoto.removeClass('current').addClass('previous');

    // animate the nextPhoto object to have zero opacity and go ahead and
    // add the 'current' class.  At this point it is still the nextPhoto
    // object regardless of what classes it has.
    nextPhoto.css({ opacity: 0.0 }).addClass('current')
        .animate( {opacity: 1.0}, 1000, function(){
            // when the animation is complete, remove the previous class
            // from the currentPhoto object.
            currentPhoto.removeClass('previous')
    });

    // Ok so if you've kept up, that was the first time through setInterval
    // Now the next time it runs the currentPhoto object will be redefined 
    // because it's going to be set as the element that has the current class
    // which at this point is now the nextPhoto object.
  };

何时在JavaScript中设置变量？

4 个答案: