iT邦幫忙

0

關於在JS裡取得參數方法

各位大大好,
有個程式功能為:點edit按鈕,此時會傳入此列的id給JS function,之後把 div 顯示出來。
按update按鈕時,把id與textarea的內容傳入給後端PHP做處理(更新資料庫)。
由於按update按鈕時需得到此編輯列的id(有很多列所以id都不同)。
請教問題:如何得到此id ?
條件1:js不使用全域變數
條件2:不要在showEdit()裡對元素新增屬性(ex: $('xxx').attr(value,id)),所以type="hidden"的input也不能用

不知是否有按edit時所傳入得id在按update時也能傳入/得到/使用,
查了一下不曉得是否跟閉包的概念有關,只是我還不太了解。
所以不知是否有人有好的方法?謝謝。

<body>
  foreach (...as value)
  {
        <a href="#" onclick="showEdit(value['id']);">edit</a>
  }

  <div class="editBox" display:none;>
        <textarea> </textarea>
        <a href="#" onclick="update();">update</a>
        <a href="#" onclick="cancel();">cancel</a>
  </div>

  <script>
        //var globalID;                不使用
        function showEdit(id)
        {        
                //globalID = id;        不使用
                $('.editBox').attr('display',"");
                //$('xxx').attr('value',id);        不使用
        }
        function update()
        {
                ....
                $ajax{....}
        }
        function cancel()
        {
                $('.editBox').attr('display',"none");
        }
  </script>
</body>
看更多先前的討論...收起先前的討論...
小魚 iT邦高手 1 級 ‧ 2019-08-11 20:10:17 檢舉
這種問題怎麼感覺很像是作業...
舜~ iT邦研究生 3 級 ‧ 2019-08-11 23:07:25 檢舉
$('.editBox')的內容會隨著id而變化嗎? 能順便紀錄id?
ex. id剛好是某訂單編號,順便show出來等等之類的
xWinter iT邦新手 5 級 ‧ 2019-08-12 00:06:39 檢舉
內容可能會變化也可能不會,不會紀錄id
fillano iT邦超人 1 級 ‧ 2019-08-12 02:16:33 檢舉
既然有個textarea在這裡,那應該是用來編輯value['id']帶來的值。這個值在呼叫showEdit時會把他放進textarea裡才對,那這樣可以從textarea取得資訊?

另外,不能用這個嗎? https://api.jquery.com/data/
dragonH iT邦大師 7 級 ‧ 2019-08-12 09:21:26 檢舉
他把條件都綁死了

用 data() 我想會踩到他說的條件2
xWinter iT邦新手 5 級 ‧ 2019-08-12 11:28:42 檢舉
textarea的val是從其他欄位(td)取得(foreach時把id給予td)
所以showEdit(id)裡是有一行:
textarea.val($('td#'+id).text());
不過由於只取內容 沒有存id相關所以就沒打出來
data()方法也被條件鎖住了

1 個回答

1
fillano
iT邦超人 1 級 ‧ 2019-08-12 11:14:28
最佳解答

既然你想用閉包:

<body>
foreach (...as value)
{
	<a href="#" onclick="showEdit(value['id']);">edit</a>
}

<div class="editBox" display:none;>
	<textarea> </textarea>
	<a href="#" id="update">update</a>
	<a href="#" id="cancel">cancel</a>
</div>

<script>
	function showEdit(id)
	{        
		$('.editBox').attr('display',"");
		$('#update').unbind('click').on('click', update);
		$('#cancel').unbind('click').on('click', cancel);
		function update()
		{
			//使用id參數
			$ajax{....}
		}
		function cancel()
		{
			//使用id參數
			$('.editBox').attr('display',"none");
		}
	}
</script>
</body>

我沒測試過,你試試看吧。

dragonH iT邦大師 7 級 ‧ 2019-08-12 11:58:27 檢舉

codepen

報告 測試ok

/images/emoticon/emoticon32.gif

xWinter iT邦新手 5 級 ‧ 2019-08-12 12:48:45 檢舉

謝謝大大,此方法成功
原來可以把事件加到function裡
測試了一下原以為把.unbind()移除後也可以,
但發現再按其他編輯按鈕時就會有重複送出的動作。
原因個人認為是否因為每點擊edit按鈕,
就會對update按鈕新增一個click事件,
若沒移掉原來的click事件,
在按update後就會觸發所有自身click事件,
所以.unbind()是必要的

我要發表回答

立即登入回答