Question

我是Jquery和学习阶段的新手。我已经写了一个测试程序。

<html>
    <head>
        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                $("Button").click(function(){
                    $(this).parents(".ex").hide();
                });
                $(":button").click(function(){
                    $(this).parents(".ex").hide("slow");
                });

            });
        </script>
        <style type="text/css">
            .ex{
                background-color: #e5eecc;
                padding: 7px;
                border: solid 1px #c3c3c3;
            }
        </style>
    </head>
    <body>
        <h3>Island Trading</h3>
        <div class="ex">
            <input type="button" name="hid" value="Hide Me slowly">
            <p>  Contact: Helen Bennett</p>
            <p>Garden House Crowther Way</p>
            <p>London</p>
        </div>
        <h3>Paris spécialités</h3>
        <div class="ex">
            <button type="button">Hide Me Quick</button>
            <p> Contact: Marie Bertrand</p>
            <p>265, Boulevard Charonne</p>
            <p>Paris</p>
        </div>
    </body>
</html>

这是按预期工作的。每当我点击慢慢地隐藏我时，它就会慢慢隐藏。由于选择器“：button”的事件要求这样做。和类似于快速隐藏 - 选择器是“按钮”，它很快被隐藏。

但是一旦我改变了脚本中事件处理函数的顺序，它们都会被慢慢隐藏。

中的代码更改

<script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $(":button").click(function(){
                $(this).parents(".ex").hide("slow");
            });

            $("Button").click(function(){
                $(this).parents(".ex").hide();
            });

    });
</script>

我的问题是，我没有更改选择器只修改了订单。对于选择器“按钮”，我已经编写了事件处理函数，只能隐藏并且没有指定“慢”。但后来它慢慢隐藏起来。你可以调查一下，让我知道为什么吗？

Answer 1

:button将匹配类型按钮的输入以及按钮元素。 Button仅匹配按钮元素。因此，文档中的Button元素会将两个处理程序绑定到其click事件，因为两个选择器都会选择它。

证明：http://jsfiddle.net/g7deV/

（当你点击'快速隐藏我'时，两个警报都会弹出。如果你改变事件处理程序的顺序，两个警报仍然会弹出，只是按相反的顺序）

Answer 2

来自jQuery documentation for the :button selector：

描述：选择按钮的所有按钮元素和元素。

因此，您的button元素将附加两个click个事件处理程序。事件处理程序按照它们添加的顺序执行，因此在原始代码中，首先执行“快速”处理程序。当您更改事件处理程序的顺序时，还会更改它们的执行顺序，因此将首先执行“慢”事件处理程序。

Answer 3

我会使用更具体的选择器来做这样的事情。给你的按钮id或类，并使用它来附加处理程序！像这样：

<script>
$(function(){
    $('#button1').click(function(){
        $(this).parents(".ex").hide("slow");

    });
});

</script>

“按钮”和“：按钮”选择器的问题

3 个答案: