jquery - 在哪里正确声明函数 jQuery

Question

我想声明一个函数并将其用于其他函数。在此示例中，被调用的函数显示警报但不更改背景颜色。但是，如果我在 $('.box').click(function() {... 中声明该函数，那么它可以正常工作。

我做错了什么？如何在全局范围内声明一个函数？

$(document).ready(function() {

   function changeColor() {
      $(this).css('background-color','red');
      alert('Color changed!');
  }
  
  $('.box').click(function() {
  	changeColor();
  })
});

.box {
  width: 100px;
  height: 100px;
  border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box"></div>

Answer 1

如果你像这样调用changeColor，那么上下文this将是全局对象window，而不是你想要的。

简单的解决方案是将传递元素作为参数传递到函数中:

$(document).ready(function() {

  function changeColor(element) {
    $(element).css('background-color', 'red');
    console.log('Color changed!');
  }

  $('.box').click(function() {
    changeColor(this);
  })
});

.box {
  width: 100px;
  height: 100px;
  border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box"></div>