关于调用以DOM为目标的自定义方法的问题

Issue on Calling a Custom Method Targeting DOM

本文关键字：目标 自定义方法 问题 DOM 于调用 调用      更新时间：2023-09-26

你能看看这个演示吗，让我知道它为什么不工作

  function changeColor(item){
   var item =  $(this);
   item.css("color", "green");
 }
$(".changer").on("click", function(){
     $('p').changeColor();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p >Name</p>
<button class="btn btn-default changer" type="submit">Changer</button>'

您需要将changeColor定义为jQuery插件，而不是简单的函数。

 $.fn.changeColor=function(){
  
       this.css("color", "green");
 }

然后，不再需要item参数，因为您可以通过this访问jQuery中的目标元素；

__

演示：

$.fn.changeColor=function(){
           this.css("color", "green");
}
    $(".changer").on("click", function(){
         $('p').changeColor();
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p >Name</p>
    <button class="btn btn-default changer" type="submit">Changer</button>'

您调用函数changeColor就像调用jQuery插件一样，但它只是一个简单的javascript函数。

$.fn.changeColor = function changeColor(){
   var item =  $(this);
   item.css("color", "green");
 }
$(".changer").on("click", function(){
     $('p').changeColor();
});

请参阅演示https://jsbin.com/cisujixiru/edit?js，输出

相关文章：