Question

我有这个功能来移动我的＃cubo1，但是我想将不同值的相同功能应用到其他功能（＃cubo2，＃cubo3和＃cubo4）但是我有点新手，我有不知道怎么做，我已经尝试复制函数的某些部分，但每次只有一个工作..

HTML

<div class="fundo">
    <div id='cubo1'></div>
    <div id='cubo2'></div>
    <div id='cubo3'></div>
    <div id='cubo4'></div>
</div>

CSS

.fundo {
    width: 500px;
    height: 80px;

}

div#cubo1 {
    width: 50px;
    height:50px;
    background-color:red;
    position:fixed;   
}

div#cubo2 {
    width: 50px;
    height:50px;
    background-color:blue;
    position:fixed;   
}

div#cubo3 {
    width: 50px;
    height:50px;
    background-color:green;
    position:fixed;   
}

div#cubo4 {
    width: 50px;
    height:50px;
    background-color:orange;
    position:fixed;   
}

JavaScript的：

<script type="text/javascript">

$(document).ready(function(){
    animateDiv();   
});

function makeNewPosition(){
    var h = $('.fundo').height() - 50;
    var w = $('.fundo').width() - 50;    
    var nh = Math.floor(Math.random() * h);
    var nw = Math.floor(Math.random() * w);   
    return [nh,nw];     
}
function animateDiv(){
    var newq = makeNewPosition();
    var oldq = $('#cubo1').offset();
    var speed = calcSpeed([oldq.top, oldq.left], newq);
    $('#cubo1').animate({ top: newq[0], left: newq[1] }, speed, function(){
      animateDiv();        
    });    
};




function calcSpeed(prev, next) {   
    var x = Math.abs(prev[1] - next[1]);
    var y = Math.abs(prev[0] - next[0]);    
    var greatest = x > y ? x : y;  
    var speedModifier = 0.01;
    var speed = Math.ceil(greatest/speedModifier);
    return speed;
}

</script>

Answer 1

您的jQuery选择器可以是变量：

var i = 1; //or 2 or 3 or 4...

$('#cubo' + i).animate(...);

这也可能是animateDiv函数的参数：

function animateDiv(i){
    $('#cubo' + i).animate(...);
}

如果要为所有这些设置制作动画，可以将其粘贴在for循环中：

for(var i = 1; i < 5; i++){
   $('#cubo' + i).animate(...);
}

具有不同值的不同对象的相同功能

1 个答案: