时间戳

首页 > 解决方案 > 使用来自就绪函数的参数将正确的上下文传递给函数

javascript - 使用来自就绪函数的参数将正确的上下文传递给函数

问题描述

我花了一天时间试图找到将正确的上下文传递给removeForm. 目标是使用removeForm在按下<a class="remove_2"> remove </a>链接时调用的 which 来删除removeForm在这种情况下传递给“subform2”的类的内容。这是我尝试过的：

function removeForm(tgsubf) {
    var $removedForm = $(this).closest(tgsubf);
    var removedIndex = parseInt($removedForm.data('index'));
    $removedForm.remove();
}
    
$(document).ready(function() {
    $('.remove_2').click(function(e){
        e.preventDefault();
        removeForm('.subform2')
    });
}

<div class="subform2">
    <a class="remove_2"> remove </a>
</div>

我知道上下文取决于我如何调用函数，但如果我使用调用函数，removeForm('subform2')我仍然有这个问题。完整的示例在此处托管。

标签： javascriptjquerythis

解决方案

如果要删除.subform2包含.remove_2被单击的元素，可以执行以下操作。

当您在传递给 jQuery 的事件回调中时，this（通常）保存接收到事件的元素。因此，您应该将代码更改为具有以下内容：

$('.remove_2').click(function(e){
    e.preventDefault();
    removeForm(this)  // <-- 'this' will refer to $('.remove_2')
});

然后您可以更改您的removeForm()以获取传递给它的元素的直接祖先（这将是.remove_2），.subform2并删除它，如下所示：

function removeForm(anchor) {
    var $removedForm = $(anchor).closest('.subform2');
    $removedForm.remove();
}

更新

您应该能够传递一个选择器removeForm来识别祖先，如下所示：

function removeForm(el, ancestorSelector) {
    // Do check to ensure ancestorSelector is provided, before using it.
    var $removedForm = $(el).closest(ancestorSelector);
    $removedForm.remove();
}

您可以像这样更新您的称呼方式：

$('.remove_2').click(function(e){
    e.preventDefault();
    removeForm(this, '.subform2')  // <-- 'this' will refer to $('.remove_2')
});

推荐阅读