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

How to have multiple functions in jQuery ready?

本文关键字：好多个 函数 jQuery      更新时间：2023-09-26

我可以创建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>
这是否正确地说明如何在

一个文档中创建多个功能，或者是否有更简单的方法来创建它们？你能告诉我如何创建多个而不是一个吗？

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

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

但是，选择器$("banner")无效，如果您定位的是一类横幅，则应$(".banner")，ID将$("#banner")

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

您需要使用类选择器，因为元素中有类banner。此选择器的末尾也缺少双引号:

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

它们放在同一个$(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/

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

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

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

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

concat 按钮和横幅点击代码$(document).ready：

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

如果你打算多次使用代码，那么编写一个隐藏某个元素的函数是相当容易的。然后你只需要用一个参数（DOM的值）调用函数。

   function hideElement(value)
{
    $('' + value +' ').click(function() {
        $(this).fadeTo();       
    });

    $(document).ready(function() {
        hidedElement(banner);
        hideElement(button);
    });
相关文章：