在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>