Question

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

我做错了什么？我怎样才能全局声明一个函数？

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

您需要传递.box的对象。您正在调用的函数不会使用.box使$(this)成为对象，这就是您需要在函数上传递this对象的原因。

$(document).ready(function() {

   function changeColor(that){
      $(that).css('background-color','red');
      alert('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>

希望这会对你有所帮助。

Answer 2

要使用click事件之外的函数，您应该将this作为参数传递。

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


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

Answer 3

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

简单的解决方案是将pass元素作为参数传递给函数：

$(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>

Answer 4

直接将函数作为事件处理程序传递或使其匿名，否则$(this)将是窗口而不是元素

$(document).ready(function() {

  function changeColor() {
    $(this).css('background-color', 'red');
    alert('Color changed!');
  }

  $('.box').click(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>

在哪里正确声明一个函数jQuery

4 个答案: