在页面上以多种形式之一动态添加ID

如果我的标题有点令人困惑，我表示歉意。我想不出一个好的方法来标题。在页面上以多种形式之一动态添加ID

无论如何，我正在寻找一些jQuery的帮助。

我有一个页面，有3种形式。每个表单中的所有表单字段都预填充了值，并且默认情况下处于禁用状态。

每个表格都有一个“编辑”链接（所有链接都具有相同的类），一旦点击就会删除禁用属性，显示保存和取消按钮，并将焦点放在第一个输入字段上。当我硬编码我需要的所有ID时，我可以自己完成这项工作。但那真的不适合我的情况。

每个表单之间唯一的唯一标识符是表单标签的ID。

我想要做的是当页面加载时，我想向编辑链接添加一个ID，并将窗体ID附加到新创建的编辑链接ID。

这是一个非常基本的代码示例展示一下我的工作：

<form id="form-1"> 
    <a class="edit">Edit</a> 
    ... 
</form> 
<form id="form-2"> 
    <a class="edit">Edit</a> 
    ... 
</form> 
<form id="form-3"> 
    <a class="edit">Edit</a> 
    ... 
</form>

我在找一个ID动态地添加到每个编辑链接，而无需在HTML明确设置。我想添加一个“edit- [form ID]”的ID，其中[form ID]是表单的ID。

所以在页面加载后我想的形式看起来像这样：

<form id="form-1"> 
    <a class="edit" id="edit-form-1">Edit</a> 
    ... 
</form> 
<form id="form-2"> 
    <a class="edit" id="edit-form-2">Edit</a> 
    ... 
</form> 
<form id="form-3"> 
    <a class="edit" id="edit-form-3">Edit</a> 
    ... 
</form>

这是我迄今为止尝试过，但不能让它正常工作。

$(document).ready(function(){ 
    $("form").each(function(index) { 
      var formID = $("form").attr("id"); 
      $(".edit").attr("id", "edit-" + formID); 
     }); 
});

不幸的是，它将id="edit-form-1"添加到所有表单编辑链接。

我还需要做类似的其他元素，但看到一个工作示例应该可以帮助我解决问题。

任何帮助将不胜感激。

来源

2016-09-21 Jonathan Ryan Patterson

真正的问题是为什么你需要这些ID？如果你想要事件处理程序，你可以做'$（this）.closest（'form'）'来访问与被点击的按钮相关的每个表单，你不需要ID？ – adeneo

你知道，你可能是对的。我想将ID添加到某些事物中以便用作点击事件的选择器。我对JS并不是很有经验，所以可能没有接近这个最好的方式，但是我在紧张的时间表上，所以只是试着让它工作，我仍然对“this”感到困惑，选择器如果我没有使用它，因为它显示在jQuery的网站上的例子 –

使用this.id和.edit孩子的this

$("form").each(function() { 
    $(".edit", this).attr("id", "edit-" + this.id); 
});

其中$(".edit", this)相当于$(this).find(".edit")

我必须承认，这是一个有点奇怪，你需要添加这些ID ...你总是可以做类似于：

$(".edit").on("click", function() { 

    var $myForm = $(this).closest("form"); 
    // Do something with $myForm 

});

从未携带过窗体或按钮I d

来源

2016-09-21 21:34:44

嘿Roko，感谢您的帮助和解释所以，如果我要使用您的推荐脚本，在哪里说//做某事$ myForm，然后我将如何定位某些类例如，我有一些默认情况下禁用的表单字段，使用disabled属性，我有一个名为“disabled”的类，我需要将这些输入定位到残疾人类，然后删除禁用财产所以会以某种方式需要纳入这样的事情： $（“。disabled”）removeProp（“disabled”）; –

@JonathanRyanPatterson就像'$ myForm.find（“。disabled”）。something（）' –

因此，基于断ROKO的回答，我能够实现我在做这个寻找：

$(".edit).on("click", function() { 
    $(this).closest("form").find(".disabled").removeProp("disabled"); 
});

不过，我是不是能够得到它保存到何时工作然后使用变量$ myForm。但我可能没有正确使用它。

再次感谢您的帮助！

来源

2016-09-22 14:41:34

在页面上以多种形式之一动态添加ID

回答

相关问题