如何使兩個相同的類對相同的 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