如何在一个 JS 文件中使用多个函数

Question

前段时间，一位网页设计师向我展示了如何在一个 JS 文件中组织我的功能。但是，我无法让它工作。页面没有错误但是功能好像没有运行？

想法是，如果项目 (Class) 在 HTML 中，我运行 JQuery 函数，它在我的 functions.js 中，如果不是，则无需执行任何操作.我创建了一个 CodePen 供人们查看。

欢迎任何帮助:)

(function($) {
  var siteScripts = {
    /*
     * function onReady
     */
    onReady: function() {
      this.boxOne();
      this.boxTwo();
    },
    
    boxOne: function() {
      if ($('.box-one').length) {
        $('.box-one p').html('Canary One');
      }
    },

    boxTwo: function() {
      if ($('.box-two').length) {
        $('.box-two p').html('Canary Two');
      }
    }
  };

  $().ready(function() {
    //jQuery.noConflict();
    siteScripts.onReady();
  });

  function makeShort() {

  }
})(jQuery);

<h1>Hello World</h1>

<div class="box-one">
    <p>I love my canary</p>
</div>

<div class="box-two">
    <p>I love my canary</p>
</div>

<input type="button" id="test" value="Submit">

<!-- jQuery  -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Answer 1

只需将 jQuery 对象传递给函数：

(function ($) {
    ...
})($);

这将解决您原来的问题。

此外，您在 boxOne 和 boxTwo 函数中的 select 似乎是错误的，因为它们 select 所有段落，而不仅仅是相应的段落盒子。

select或boxOne中的应该是：

$('.box-one p')

在boxTwo中应该是：

$('.box-two p')

如何在一个 JS 文件中使用多个函数

How do I use multiple functions in one JS file

javascript

jquery

function