Объявление более одной кнопки в jQuery

Question

Я пытаюсь создать веб-страницу с двумя кнопками, выполняющими разные действия. Когда я нажимаю на одну кнопку, она выполняет обе функции, но я хочу, чтобы она выполняла только одну функцию.

ЗАДАЧА 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>