Question

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

这个想法是，如果项目（Class）在HTML中我运行我的functions.js中的JQuery函数，如果没有，则不需要做任何事情。我创建了一个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函数中的选择器似乎是错误的，因为它们选择了所有段落，而不仅仅是相应框中的段落。

boxOne中的选择器应为：

$('.box-one p')

并在boxTwo中应该是：

$('.box-two p')

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

1 个答案: