jQuery -重序Div通过函数传递顺序

Question

我想(希望)这是一个简单的问题。我不完全明白我在这里做什么，所以任何帮助都会很好！

我在一个容器里有4块硬币。我想运行一个函数divOrder()，并通过我希望我的div显示的顺序，就像这样：divOrder(divfour, divTwo, divThree, divOne); --它不工作，我也不知道最好的方法是什么。

HTML:

<div id="container">
  <div class="div-1">1</div>
  <div class="div-2">2</div>
  <div class="div-3">3</div>
  <div class="div-4">4</div>
</div>

JS:

var divOrder,
        url = document.location.href;

divOrder = function (divOne, divTwo, divThree, divFour) {
  var divOne = $('.div-1'),
      divTwo = $('.div-2'),
      divThree = $('.div-3'),
      divFour = $('.div-4');

  $('#container').empty().append(divfour, divTwo, divThree, divOne);

}


if (url.indexOf('?test-1') > -1) {
  divOrder(divfour, divTwo, divThree, divOne);
} else if (url.indexOf('?test-2') > -1) {
  divOrder(divThree, divTwo, divFour, divOne);
} else if (url.indexOf('?test-3') > -1) {
  divOrder(divOne, divTwo, divfour, divThree);
}

Fiddle: https://jsfiddle.net/Lvmoyw2u/

谢谢你的帮忙!

Answer 1

将变量声明移到函数声明的上方/下面。

我还建议对函数的参数使用不同的名称，这样就不会将它们与全局变量混淆。

​

var divOrder = function(d1, d2, d3, d4) {
  $('#container').empty().append(d1, d2, d3, d4);
}

var divOne = $('.div-1'),
  divTwo = $('.div-2'),
  divThree = $('.div-3'),
  divFour = $('.div-4');


setInterval(function() {
  divOrder(divOne, divTwo, divThree, divFour);
  setTimeout(function() {
    divOrder(divFour, divTwo, divThree, divOne);
    setTimeout(function() {
      // or without variables:
      divOrder($('.div-3'), $('.div-1'), $('.div-4'), $('.div-2'));
    }, 1000);
  }, 1000);
}, 3000);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="container">
  <div class="div-1">1</div>
  <div class="div-2">2</div>
  <div class="div-3">3</div>
  <div class="div-4">4</div>
</div>

​

Answer 2

在函数中，您静态地将div分配给参数，并且您的变量是私有的，因为它们在函数中，这就是为什么不能在if语句中访问它们的原因。相反，请这样做：

// global variables
var divOrder,
    url = document.location.href,
    divOne = $('.div-1'),
    divTwo = $('.div-2'),
    divThree = $('.div-3'),
    divFour = $('.div-4');

divOrder = function (div1, div2, div3, div4) {     
  $('#container').empty().append(div1, div2, div3, div4);
};

// tested it directly
divOrder(divThree, divTwo, divFour, divOne);


if (url.indexOf('?test-1') > -1) {
  divOrder(divFour, divTwo, divThree, divOne);
} else if (url.indexOf('?test-2') > -1) {
  divOrder(divThree, divTwo, divFour, divOne);
} else if (url.indexOf('?test-3') > -1) {
  divOrder(divOne, divTwo, divFour, divThree);
}

JSFiddle