javascript - 如何在单击元素时撤销外部功能？

Question

这是我的代码:

$(function(){ // ready

  function myfunc($el){
      $el.text("You clicked ..!");
  }

  $("div").click(myfunc($(this)));
  
})

div{
  padding: 20px;
  border: 1px solid gray;
  cursor: pointer;
  text-align: center;
}

div:hover{
  background-color: #f1f1f1;
}

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

<div>Click Here</div>

为什么点击后文字没有变化？

Answer 1

要传递变量/参数，您需要执行类似的操作才能使其工作

$("div").click(function(){myfunc($(this))});

堆栈片段

$(function(){ // ready

  function myfunc($el){
      $el.text("You clicked ..!");
  }

  $("div").click(function(){myfunc($(this))});
  
})

div{
  padding: 20px;
  border: 1px solid gray;
  cursor: pointer;
  text-align: center;
}

div:hover{
  background-color: #f1f1f1;
}

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

<div>Click Here</div>

<小时/>

要进行更简单的函数调用，您可以这样做并利用事件。

$(function(){ // ready

  function myfunc(e){
      $(e.target).text("You clicked ..!");
  }

  $("div").click(myfunc);
  
})

div{
  padding: 20px;
  border: 1px solid gray;
  cursor: pointer;
  text-align: center;
}

div:hover{
  background-color: #f1f1f1;
}

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

<div>Click Here</div>