问题描述
很多时候会遇到这样的情况：要从数据库拿出一组数据，格式化之后循环输出到页面上（例如相册里的图片）。然后要在每个数据上加个onclick事件，点击后弹出一个DIV，用来修改数据（不是提交表单，只是在页面上修改数据，或者发ajax请求，改完后直接显示在同页面上）。我想讨论的问题是：怎样让弹出的这个DIV定位到指定的数据上呢？我现在想到的方法有：1、给每个数据加个唯一的ID如<div id="id1" onclick="showchange('id1')">data1</div><div id="id2" onclick="showchange('id2')">data2</div><script>function showchange(id){ document.getElementById("targetDiv").value = id; var data = document.getElementById(id).innerHTML; document.getElementById("modDiv").style.display = "block";}</script>这样的。点击之后把传入的ID存到全局变量或隐藏域里，用户改完后再用JS读到这个ID完成页面上的修改。2、用this对象如<div onclick="showchange(this)">data1</div><div onclick="showchange(this)">data2</div><script>function showchange(div){ globalTargetDiv = div; var data = div.innerHTML; document.getElementById("modDiv").style.display = "block";}</script>直接从元素里拿东西。请问哪个方法比较好？大家平时都是怎样处理这类问题的？如果用第一个方法的话，循环输出的那些DIV的ID一般是自己随便定义一个，还是直接使用例如数据库里记录的ID之类的信息？之所以会这么问，是因为整个页面改好提交的时候，更新到数据库时，会需要这些数据的ID……数据的ID一般要怎样存在页面上呢？是用隐藏域还是直接设成DIV的ID？小弟是新手，被这些问题纠结了挺长时间了……因为总觉得把数据库里的ID直接显示到页面上不太好……
解决方案
我觉得一个页面里的结构很复杂的话尽量不用ID,因为那样你得保证页面里ID的唯一性。你可以将1，2两种方法结合起来，输出div时，将你的DB里的数据ID加密后输出到页面（可以自定义属性，不一定非要叫id），然后用this来定位到该元素，修改时取到该属性再解密就可以和你的数据关联起来。