jQuery - 重新排序Divs通过函数传递Order

我想（希望）这是一个简单的。我不完全明白我在这里做什么，所以任何帮助都会很棒！jQuery - 重新排序Divs通过函数传递Order

我有一个容器内的4个div。我想运行一个函数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); 
}

小提琴：https://jsfiddle.net/Lvmoyw2u/

感谢您的帮助！

来源

2016-08-12 Nick

您传递是相同的名称声明在你divOrder功能顶端的变量参数。通过设置这些值，可以覆盖每次传递的参数。 – beauXjames

这很有道理。我如何将通过的变量与变量关联起来？ – Nick

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

我也建议为函数的参数使用不同的名称，所以您不要将它们与全局变量混淆。

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>

来源

2016-08-12 13:58:54

你是静态分配的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

来源

2016-08-12 14:07:43

jQuery - 重新排序Divs通过函数传递Order

回答

相关问题