關於在JS裡取得參數方法

javascript jquery

Season 2019-08-11 20:03:08 ‧ 2697 瀏覽

分享至

各位大大好，
有個程式功能為:點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邦高手 1 級 ‧ 2019-08-11 23:07:25 檢舉

$('.editBox')的內容會隨著id而變化嗎? 能順便紀錄id?
ex. id剛好是某訂單編號，順便show出來等等之類的

Season iT邦研究生 3 級 ‧ 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邦超人 5 級 ‧ 2019-08-12 09:21:26 檢舉

他把條件都綁死了

用 data() 我想會踩到他說的條件2

Season iT邦研究生 3 級 ‧ 2019-08-12 11:28:42 檢舉

textarea的val是從其他欄位(td)取得(foreach時把id給予td)
所以showEdit(id)裡是有一行:
textarea.val($('td#'+id).text());
不過由於只取內容沒有存id相關所以就沒打出來
data()方法也被條件鎖住了

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

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>

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

回應 2
分享
檢舉

dragonH iT邦超人 5 級 ‧ 2019-08-12 11:58:27 檢舉

codepen

報告測試ok

Season iT邦研究生 3 級 ‧ 2019-08-12 12:48:45 檢舉

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