如何在此功能中有效地使用"this"，使其不会影响其他点击事件？

Question

我不明白这里有什么问题。代码的主要目的是创建动态行并删除它们。我的代码运行良好。但这里的主要问题是，当我使用一个函数调用冗余代码时，如果我点击一个模块(页面(，它会影响另一个页面。i

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

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

我想象了你的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>