javascript - 如何在此函数中有效地使用 "this"以便它不会影响其他点击事件？

Question

我不明白这里出了什么问题。代码的主要目的是创建动态行并删除它们。我的代码工作正常。但这里的主要问题是，当我使用函数来调用冗余代码时，如果我单击一个模块(页面)，它会影响另一个页面。我

dynamicRow.js

$(document).ready(function () {
    var $schoolAdd = $(document).find('div.schoolAdd');
    var $collegeAdd = $(document).find('div.collegeAdd');

 var $deleteButton='<div><button type="submit" class="reservedFieldRemoveButton"><i class="fa fa-minus"></i></button></div>';


   $schoolAdd.on('click','button.addButton',function(){
            var $parent= $(this).parent().parent();
            $(this).remove();
            $parent.append($deleteButton);
            $rschoolAdd.append($reservedRowToAppend);
        });
    $collegeAdd.on('click','button.addButton',function(){
            var $parent= $(this).parent().parent();
            $(this).remove();
            $parent.append($deleteButton);
            $collegeAdd.append($reservedRowToAppend);
        });
})

这对于学校和大学模块来说效果很好。但问题是当我在函数中这样做时

  function testFunction(addButton){
       var $parent= $(addButton).parent().parent();
       $(addButton).remove();
       $parent.append($deleteButton);
  }
  $schoolAdd.on('click','button.addButton',function(){
            testFunction('button.addButton');
            $rschoolAdd.append($reservedRowToAppend);
  });
  $collegeAdd.on('click','button.addButton',function(){
            testFunction('button.addButton');
            $collegeAdd.append($reservedRowToAppend);
  });

但是当我单击学校模块的事件时使用此功能，我看到大学模块也受到影响。但这不应该发生。它们是单独的功能。我猜我可能在函数中以错误的方式使用了“this”。我该如何解决这个问题？

Answer 1

因为您正在访问所有具有 .addButton 类的 DOM 中的所有按钮元素，而不仅仅是单击的元素。你为什么不用“这个”？

我想象了你的 HTML 代码，因为你还没有发布(记得下次发布):

$(document).ready(function () {
    var $schoolAdd = $(document).find('div.schoolAdd');
    var $collegeAdd = $(document).find('div.collegeAdd');

 var $deleteButton='<div><button type="submit" class="reservedFieldRemoveButton"><i class="fa fa-minus"></i>delete</button></div>';
    function testFunction(addButton){
           var $parent= $(addButton).parent().parent();
           $(addButton).remove();
           $parent.append($deleteButton);
      }
      $schoolAdd.on('click','button.addButton',function(){
                testFunction(this);
                $schoolAdd.append("added!");
      });
      $collegeAdd.on('click','button.addButton',function(){
                testFunction(this);
                $collegeAdd.append("added!");
      });
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="schoolAdd"><div><button class="addButton">add</button></div></div>
<div class="collegeAdd"><div><button class="addButton">add</button></div></div>