jQuery - 再注文Divs通過注文機能を介して

Question

私は（希望）これはシンプルなものだと思う。私はここで何をしているのか十分に理解していないので、どんな助けも素晴らしいだろう！

コンテナ内に4つのdivがあります。私は関数divOrder()を実行し、私のdivsが表示されるように順序を渡したいと思います：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); 
} 

フィドル：あなたの助けをhttps://jsfiddle.net/Lvmoyw2u/

ありがとう！

Answer 1

変数宣言を関数宣言の上または下に移動します。

また、関数のパラメータに異なる名前を使用することをお勧めします。したがって、それらをグローバル変数と混同しないでください。あなたは静的に自分の引数にdivを割り当てた、と彼らは関数内であったため、あなたの変数はプライベートであり、あなたがあなたのif文の内部でそれらにアクセスすることができなかった理由です関数内

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

。あなたはあなたのdivOrder関数の先頭に宣言した変数と同じ名前のパラメータに渡している

// 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