Javascript “问题”；按钮“；及按钮“；选择器_Javascript_Jquery

Javascript “问题”；按钮“；及按钮“；选择器

javascript jquery

Javascript “问题”；按钮“；及按钮“；选择器,javascript,jquery,Javascript,Jquery,我对Jquery还不熟悉，还处于学习阶段。我已经用它写了一个测试程序 <html> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("

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


$（文档）.ready（函数（）{
$（“按钮”）。单击（函数（）{
$（this.parents（“.ex”）.hide（）；
});
$（“：按钮”）。单击（函数（）{
$（this.parents（“.ex”）.hide（“slow”）；
});
});
前任{
背景色：#e5eecc；
填充：7px；
边框：实心1px#c3c3；
}
岛屿贸易
联系人：海伦·贝内特
克劳瑟路花园酒店
伦敦
巴黎酒店
快把我藏起来
联系人：玛丽·伯特朗
沙隆大道265号
巴黎

这是预期的工作。每当我单击“慢慢隐藏我”时，它都会慢慢隐藏。当事件发生时，选择器“：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>


$（文档）.ready（函数（）{
$（“：按钮”）。单击（函数（）{
$（this.parents（“.ex”）.hide（“slow”）；
});
$（“按钮”）。单击（函数（）{
$（this.parents（“.ex”）.hide（）；
});
});

我的问题是，我没有更改选择器，只是修改了顺序。对于选择器“按钮”，我编写了事件处理函数，只隐藏，没有指定“慢”。但是它慢慢地隐藏起来。你能检查一下并告诉我原因吗？

：按钮将匹配按钮类型和按钮元素的输入<代码>按钮

将仅匹配按钮元素。因此，文档中的Button元素将获得两个绑定到其click事件的处理程序，因为这两个选择器都选择了它

证明：

（当您单击“快速隐藏我”时，两个警报都会弹出。如果您更改事件处理程序的顺序，两个警报仍会弹出，只是顺序相反）

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


$（函数（）{
$（'#按钮1'）。单击（函数（）{
$（this.parents（“.ex”）.hide（“slow”）；
});
});

来自：

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

因此，您的

按钮

元素将有两个

单击

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

+1解释为什么对象上的两个事件处理程序会产生此结果。非常感谢！这是一个很好的解释和简单的例子。

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

    });
});

</script>