在頁面上以多種形式之一動態添加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

回答

相關問題