如何在jQuery中准备多个函数?

时间:2015-06-18 14:39:11

标签: javascript jquery

我可以创建Jquery函数,但是如果你想要更多函数怎么办呢。 例如,我想要一个下拉列表和一个按钮的功能。 我似乎只能做一个功能:

<script type="text/javascript">
   $(document).ready(function() {
      $("button").click(function() {
         this.hide();
      });
   });
</script>
<script type="text/javascript">
   $(document).ready(function() {
      $("banner").click(function() {
        this.fadeTo();
      });
   });
</script>

这对于如何在一个文档中创建多个函数或者是否有更简单的方法来创建它们是正确的吗? 你能告诉我如何创建多个而不是一个吗?

7 个答案:

答案 0 :(得分:7)

这两个函数都可以进入同一个文档就绪函数:

<script type="text/javascript">
$(document).ready(function() {
    $("button").click(function() {
        $(this).hide();
    });
    $("banner").click(function() 
        $(this).fadeTo();
    });
});
</script>

但是,选择器$("banner")无效,如果您定位的是横幅广告,则应为$(".banner"),ID为$("#banner")

答案 1 :(得分:2)

您应该使用单个文档就绪事件,然后将两个方法包装在其中。

你需要使用类选择器,因为元素中包含类banner。此选择器末尾缺少双引号 :

$(document).ready(function() {
   $("button").click(function() {
     $(this).hide();
   });
   $(".banner").click(function() {
     $(this).fadeTo();
   });
});

答案 2 :(得分:1)

您可以将它们放在同一个$(document).ready函数中 - 您不需要为每个事件监听器准备好新文档。

<script type="text/javascript">
$(document).ready(function() {

    $("button").click(function() {
        $(this).hide();
    });

    $("banner).click(function() {
        $(this).fadeTo();
    });
});
</script>

您的$("banner")选择器也无效 - 请在此处查看jQuery选择器文档:https://api.jquery.com/category/selectors/

答案 3 :(得分:0)

您只需要一个$(document).ready(function () {})

<script type="text/javascript">
    $(document).ready(function () {
        $("button").click(function () {
            $(this).hide();
        });
        $("banner").click(function () {
            $(this).fadeTo();
        });
    });
</script>

答案 4 :(得分:0)

合并两者并将$("banner)更改为$(".banner")

$(document).ready(function() {
    $("button").click(function() {
        $(this).hide();
    });
    $(".banner").click(function() 
        $(this).fadeTo();
    });
});

答案 5 :(得分:0)

concat button&amp;横幅点击$(document).ready中的代码:

<script type="text/javascript">
$(document).ready(function() {
    $("button").click(function() {
        $(this).hide();
    });
    $("banner").click(function() {
        $(this).fadeTo();
    });
});
</script>

答案 6 :(得分:0)

如果要多次使用代码,编写一个隐藏某个元素的函数相当容易。然后你只需要用一个参数(你的DOM的值。

)调用该函数
   function hideElement(value)
{
    $('' + value +' ').click(function() {
        $(this).fadeTo();       
    });


    $(document).ready(function() {
        hidedElement(banner);
        hideElement(button);

    });