Question

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

任务3.1：200x200绿箱div：

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

在jQuery中声明多个按钮

3 个答案: