在jQuery中声明多个按钮

Question

我试图制作一个具有2个按钮执行不同动作的网页。当我点击一个按钮时，它正在执行这两个功能，但我希望它只执行一个功能。

任务3.1：200x200的绿色框格：

<button>Remove</button> 
<script> 
    $(document).ready(function(){ 
     $("button").click(function(){ 
      $("div").remove(); 
     }); 
    }); 
    <br/> 
</script> 

<button>Animate</button> 
<script> 
    $(document).ready(function(){ 
     $("button").click(function(){ 
      $("div").animate({ left:'300px' }); 
     }); 
    }); 
</script> 

<div style=" 
    width: 200px; 
    height: 200px; 
    padding: 25px; 
    border: 25px solid green; 
    margin: 25px; 
    position: absolute;"> 
</div> 

Answer 1

的选择"button"比赛当时的文档中的每个按钮。当一个选择器匹配多个元素时，$.fn.click方法实际上遍历该结果集合并绑定到匹配的每个元素。

如果您只想匹配特定元素，则需要将它们与其他匹配元素区分开来。其中最常见的方式，如果给他们一个唯一的ID来做到这一点：

<button id="remove">Remove</button> 
<button id="animate">Animate</button> 

，然后从脚本目标的具体做法是：

$("#remove").click(function remove() { 
    $("div").remove(); // This removes every div from the document 
}); 

$("#animate").click(function animate() { 
    $("div").animate({ left: 300 }); // Animates the left property of every div 
}); 

Answer 2

您需要分配不同的id或class到每个按钮。您还可以将两个脚本压缩为一个。此外，似乎不是使用div选择器，还应该将特定的id或class指定给div。

<script> 
    $(document).ready(function(){ 
     $("#button1").click(function(){ 
      $("div").remove(); 
     }); 

     $("#button2").click(function(){ 
      $("div").animate({ 
       left:'300px' 
      }); 
     }); 
    }); 
</script> 

Answer 3

<button id="bremove"> Remove</button> 
<script> 
    $(document).ready(function(){ 
     $("button#bremove").click(function(){ 
      $("div").remove(); 
            }); 
           }); 
    <br/> 
</script> 

<button id="banimate"> Animate</button> 
<script> 
    $(document).ready(function(){ 
     $("button#banimate").click(function(){ 
      $("div").animate({ 
       left:'300px' 
      }); 
     }); 
    }); 
    </script>