亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

單獨編輯對象的屬性,需要“編輯”框為每個屬性動態打開

單獨編輯對象的屬性,需要“編輯”框為每個屬性動態打開

泛舟湖上清波郎朗 2023-06-09 17:31:18
后端是帶有 Django 模型的 Python。以下是我在用戶界面中的內容。當用戶單擊“編輯”筆時,我希望文本框輸入顯示在先前值的正下方,同時在頁面頂部彈出一個“提交更改”按鈕。用戶需要能夠根據需要編輯盡可能多的屬性,然后一次提交所有更改。我的對象有超過 75 個屬性,所以如果我為每個屬性創建一個獨特的函數,javascript 將變得非常冗長和麻煩。到目前為止我有這個:HTML:<button id="edit_submit" type="submit" form="job_text_edit">Commit Changes</button><form id="job_text_edit" action="pass to backend"></form><table class="z-depth-3"> <tr>  <td style="width: 200px">Job Name:</td>  <td>     {{job.job_name}}<a href="#"><i class="tiny material-icons" onclick="jobEdit()">edit</i></a>     <input id="job_name_i" name="job_name_i" type="text" form="job_text_edit">  </td>  </tr>  <tr>   <td>Work Schedule:</td>   <td>     {{job.work_schedule}}<a><i class="tiny material-icons" onclick="jobEdit()">edit</i></a>    <input id="work_schedule_i" name="work_schedule_i" type="text" form="job_text_edit">    </td>  </tr></table>javascript:<script> $(document).ready(function(){    $('#edit_submit').hide();    $('#job_name_i').hide();    $('#work_schedule_i').hide();  })  function jobEdit(){    $('#edit_submit').show();    $('#job_name_i').show();    $('#work_schedule_i').show();      }</script>問題是當你點擊任何“編輯”筆時,所有的編輯框都會彈出。有沒有辦法讓函數知道單擊了哪個,以便我可以在函數中實現條件語句以僅顯示必要的框?我嘗試傳入一個帶有輸入 ID 的字符串,但該函數在給定字符串參數時會拋出錯誤。任何幫助是極大的贊賞!
查看完整描述

1 回答

?
躍然一笑

TA貢獻1826條經驗 獲得超6個贊

當您從后端提取數據時,您還需要提取一個 id 或一些唯一值。


該值對于您在上面的屏幕截圖中顯示的每個單獨行或該行中的元素都是唯一的。


然后當你呈現你的 html 時,將 id(唯一值)附加到當前 id(元素上的 html id)的末尾


因此,例如,在您輸入 id="job_name_i" 的地方,您可以在渲染時將唯一值 (id) 添加(附加)到它的末尾。


然后,您可以不用在 onclick 中傳遞函數調用(并在 html 中定義 onClick),而是可以在 javascript 的 init 部分設置一個事件偵聽器,如下所示:


$("[id^=job_name_i]").on('click', event => {

  const clickedElement = $(event.target);

});


上面的代碼將偵聽對以 job_name_i 開頭的任何元素的點擊(請記住,您的唯一值將附加到它的末尾。


所以上面的內容會放在下面的塊中。


$(document).ready(function(){


});

您現在可以訪問頁面上的特定單擊元素,根據需要執行操作,在其下方或上方添加內容。因此,您可以使用 event.target.id 訪問 ID,并將其傳遞給您的函數。


像下面這樣的東西。


  function jobEdit(id){

    $(id).show(); 

    // OR

    $(someelement + id).show(); 

  }


查看完整回答
反對 回復 2023-06-09
  • 1 回答
  • 0 關注
  • 135 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號