如何使两个相同的类对相同的 javascript function 以不同的方式工作？

Question

我想用相同的 javascript function 使这两个圆圈移动不同（它们在移动时获得相同的方向），但我是使用 javascript 的新手并且不知道如何制作它。

我不知道如何使 javascript 在 html 中的相同类之间有所不同以获得相同的 function 但根据其特定的 class 的不同工作方式不同。我的理想代码将使两个圆圈随机移动，但在独立的方向上从一个圆圈移动到另一个圆圈。

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/stylesheet.css">
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.7.1.min.js"></script>
</head>
    
<body>
    <div class="wrapper" style="top:18%;left:15%">
        <a href="childs_html/aa.html" class="circle aa">aa</a>
    </div>
    <div class="wrapper" style="top:58%;left:18%">
        <a href="childs_html/bb.html" class="circle bb">bb</a>
    </div>
    <script src="javascript/circle_movement.js"></script>
</body>

body {
    overflow: hidden;
    margin: auto;
    width: 640px; 
    padding: 50px;    
  }

  .wrapper {
    position:absolute;
    height:200px; width:200px;
    /* border-style:solid; */
  }
  
  .circle {
    position:relative;
    height:100px; width:100px;
    margin-top:50px;margin-left:50px;
    border-radius:50%;
    border-style:solid;
  }

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

function randomNumber(min, max) { 
    return Math.floor(Math.random() * (max - min) + min);
} 

function new_position() {
    var newt = randomNumber(-50,50);
    var newl = randomNumber(-50,50);

    return [newt, newl]
}

function animation(){
    var newpos = new_position();
    var speed = 2000;

    $('.circle').animate({ top: newpos[0], left: newpos[1] }, speed, function(){
        animation();        
      });

};

非常感谢你！

Answer 1

目标circle aa ：

$('.circle.aa').animate({ top: newpos[0], left: newpos[1] }, speed, function(){
     // Animation for circle aa  
     animation_aa();      
});

以circle bb为目标：

$('.circle.bb').animate({ top: newpos[0], left: newpos[1] }, speed, function(){
     // Animation for circle bb 
     animation_bb();      
});

如何使两个相同的类对相同的 javascript function 以不同的方式工作？

问题描述

1 个解决方案

解决方案1
0 已采纳 2022-10-03 10:53:25

如何使两个相同的类对相同的 javascript function 以不同的方式工作？

问题描述

1 个解决方案

解决方案1 0 已采纳 2022-10-03 10:53:25

解决方案1
0 已采纳 2022-10-03 10:53:25