Question

我对JS有一点问题..

- 有一个divs，这会在他们随机更改的行中自动更改...

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

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

所以我应该用class或id来检查div的位置，在JS中设置如下：

... check div的位置 ...... if向上移动就像改变位置到更低的价值变化'绿色' ... else更改为较低的值，例如从'2'更改为'5'更改为'red'

以下是现在如何工作的示例：CLICK HERE FOR SAMPLE

$(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：

stub_replace(EmbassyInterface, :post_to_embassy, &prc)
mock_result = mock.post_to_embassy(orderInfoXml)
p mock_result

# cleanup
undo_stub_replace(EmbassyInterface, :post_to_embassy)

希望这有帮助！

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

1 个答案: