javascript - 向上/向下移动时颜色变化

Question

我对那个 JS 有点问题..

- 有一个 divs 并且这是在随机变化的行中自动变化的...

• 我需要将向上移动的 div 的颜色更改为绿色..
• div 正在向下移动以更改为红色..

我尝试这样做，但我只是这样做了，同时上下移动改变了相同的颜色..

所以我应该做一个 class 或 id 来检查 div 位置并在 JS 中设置类似:

... 检查 div的位置... if 向上移动，例如将位置更改为较低的值更改“绿色”... else 更改为较低的值，例如从“2”到“5”更改为“红色”

这是它现在如何工作的示例:CLICK HERE FOR SAMPLE

这是 JS 的主要文件:MAIN JS FILE for MixItUp

$(document).ready(function () {
  var mixit = $('#Container').mixItUp({
    load: {
      sort: 'random'
    },
    layout: {
      containerClass: 'list',
      display: 'block'
    }
  });
  
  function loop() {
    mixit.mixItUp('sort', 'random');
  };    
  
  var looper = setInterval(loop, 20000);
});

*{
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  background: #68b8c4;
}

.mix.category-1 {
  height: 50px;
}

#Container .mix {
  border: 1px solid black;
  margin-top: 1px;
  background-color: white;
}

.container{
  padding: 20px 0 0;
  text-align: center;
  font-size: 0.1px;
  margin-left: 35%;
  
  -webkit-backface-visibility: hidden;
}

.container:after{
  content: '';
  display: inline-block;
  width: 100%;
}

.container .mix,
.container .gap{
  display: inline-block;
  width: 49%;
}

.container .mix{
  text-align: center;
  margin-bottom: 0;
  display: none;
}

.container .mix:after{
  content: attr(data-myorder);
  color: black;
  font-size: 16px;
  display: inline-block;
  vertical-align: top;
  padding: 4% 6%;
  font-weight: 700;
}

.container .mix:before{
  content: '';
  display: inline-block;
  padding-top: 60%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="http://cdn.jsdelivr.net/jquery.mixitup/latest/jquery.mixitup.min.js?v=2.1.9"></script>
<div id="Container" class="container">
  <div class="mix category-1" data-myorder="1"></div>
  <div class="mix category-1" data-myorder="2"></div>
  <div class="mix category-1" data-myorder="3"></div>
  <div class="mix category-1" data-myorder="4"></div>
  <div class="mix category-1" data-myorder="5"></div>
  <div class="mix category-1" data-myorder="6"></div>
  <div class="mix category-1" data-myorder="7"></div>
  <div class="mix category-1" data-myorder="8"></div>
</div>

Answer 1

这里是更正后的js:

$(document).ready(function () {
  var mixit = $('#Container').mixItUp({
    load: {
      sort: 'random'
    },
    layout: {
      containerClass: 'list',
      display: 'block'
    }
  });

  function loop() {
    var arr = [];
    i = 0;
    $('.mix').each(function(){
      arr[i++] = $(this).data('myorder');
    });
    mixit.mixItUp('sort', 'random');

    mixit.on('mixEnd', function(e, state){
      var arr2 = [];
    i2 = 0;
    $('.mix').each(function(){
      arr2[i2++] = $(this).data('myorder');
    });
    for(i=0; i<i2; i++){
      for(j=0; j<i2; j++){
        if(arr[i]==arr2[j]){
          if(i<j){
            $('.mix').eq(j).css("background-color", "red");
          }
          if(i>j){
            $('.mix').eq(j).css("background-color", "green");
          }
        }
      }
    }
    });
  };

  var looper = setInterval(loop, 3000);
});

希望这对您有所帮助!