js如何获取动态生成的ID值

Stranger。 2014-12-28 03:42:32
在做一个悬浮提示，就是从数据库动态读取数据作为复选框，在选择复选框时，提示相应的提示内容
代码如下：


<tr>

		<td width="9%">

		<p align="right">层级：</td>

		<td  colspan="5"> @foreach (var item in Model.effModel)

                {

                        <input type="checkbox" id="@item.EFFECTIVE_ID" name="checkeff" value="@item.EFFECTIVE_ID" onmouseout="hidden()" onmousemove="show()"/>

                        <span>@item.EFFECTIVE_NAME</span>

                        <div id="note" style="display:none; position:absolute;z-index:1;" >@item.NOTE</div>

                                                          

                }　</td>

@item.NOTE就是要提示的内容
js如下：


<script  type="text/javascript">

    function show()

    {

        document.getElementById("note").style.display = "block";

    }

    function hidden()

    {

        

        document.getElementById("note").style.display = "none";

    }

</script>


效果如图：
只有第一个显示，后面的都不显示，请教大神们该如何做？
...全文
3598 10 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
10 条回复
切换为时间正序
请发表友善的回复…
发表回复
KK3K2005 2014-12-29
  • 打赏
  • 举报
 回复
function show() { this.s.parentNode.getElementsByTagName('div')[0].style.display = 'block'; } function hidden() { this.s.parentNode.getElementsByTagName('div')[0].style.display = "none"; }
MnZlZ 2014-12-29
  • 打赏
  • 举报
 回复
引用 6 楼 lp1791803611 的回复:

<input type="checkbox" id="@item.EFFECTIVE_ID" name="checkeff" value="@item.EFFECTIVE_ID" onmouseout="hidden()" onmousemove="show()" />
                        <span>@item.EFFECTIVE_NAME</span>                                                 
                        <div id="@item.EFFECTIVE_NAME" style="display:none; position:absolute;z-index:1;" >@item.NOTE</div>
我如果把<div>的id用@item.EFFECTIVE_NAME来表示，该如何把这个值传给js呢？
将上面的style="display:none; position:absolute;z-index:1;"替换为 class='div_Style' 

   var divs=document.getElementsByTagname('div');
   for(var dd in divs){
       if(div[dd].calssName=='div_Style'){
           //对每个id用@item.EFFECTIVE_NAME来表示的div进行操作
       }
   }
MnZlZ 2014-12-29
  • 打赏
  • 举报
 回复
引用 5 楼 lp1791803611 的回复:
<input>标签的id值是不相同的，<div>中的id值才是相同的，并且我这个页面有两个这样的<input>
还是将每个checkbox在循环一次 

    var inputs=document.getElementsByTagName('input'); //得到所有的input标签
    for(var i=0;i<inputs.length;i++){   //将你动态创建的标签再次循环一遍，避免使用了相同的id
          if(inputs.getAttribute('type')=='checkbox'){   //通过判断取出type='checkbox' 的input标签
            inputs[i].onmouserover=show;
            inputs[i].onmouseover=hidden;
          }  
     }
Stranger。 2014-12-28
  • 打赏
  • 举报
 回复 

<input type="checkbox" id="@item.EFFECTIVE_ID" name="checkeff" value="@item.EFFECTIVE_ID" onmouseout="hidden()" onmousemove="show()" />
                        <span>@item.EFFECTIVE_NAME</span>                                                 
                        <div id="@item.EFFECTIVE_NAME" style="display:none; position:absolute;z-index:1;" >@item.NOTE</div>
我如果把<div>的id用@item.EFFECTIVE_NAME来表示，该如何把这个值传给js呢？
Stranger。 2014-12-28
  • 打赏
  • 举报
 回复
引用 3 楼 u013104499 的回复:
                  @foreach (var item in Model.effModel)
                {
                        <input type="checkbox" id="@item.EFFECTIVE_ID" name="checkeff" value="@item.EFFECTIVE_ID"                   onmouseout="hidden()" onmousemove="show()"/>
                        <span>@item.EFFECTIVE_NAME</span>
                        <div id="note" style="display:none; position:absolute;z-index:1;" >@item.NOTE</div>                           
                }　</td>
请教一下，这种创建标签的方式没见过，用什么语言？ 一楼的意思就是你这种创建的方式得到的所有的chekbox具有相同的id，这种情况就相当于下面的一个例子： <input type=''checkbox' id='check' name='checkoff' value='check1' /> <input type=''checkbox' id='check' name='checkoff' value='check2' /> <input type=''checkbox' id='check' name='checkoff' value='check3' /> <input type=''checkbox' id='check' name='checkoff' value='check4' /> <input type=''checkbox' id='check' name='checkoff' value='check5' />' 当为上面的复选框指定事件是这样做的（按照你那种创建方式）： var check='document.getElementById('check'); 'check.onmouseout=hidden; check.onmouseover=show; 你可以看到了，因为id名称相同，执行事件的时候肯定不可能同时多可执行，所以只会选择执行第一个 一般在一个页面中是不允许id名称相同的，这样做麻烦太多 另解： 

  window.onload(){
     var checkboxs=document.getElementsByTagName('input');
     for(var i=0;i<checkboxs.length;i++){   //将你动态创建的标签再次循环一遍，避免使用了相同的id
         if(i){
            checkboxs[i].onmouserover=show;
            checkboxs[i].onmouseover=hidden;
         }
     }
     function show()
    {
        document.getElementById("note").style.display = "block";
    }
    function hidden()
    {
         
        document.getElementById("note").style.display = "none";
    }
  }
<input>标签的id值是不相同的，<div>中的id值才是相同的，并且我这个页面有两个这样的<input>
蝶恋花雨 2014-12-28
  • 打赏
  • 举报
 回复
你的ＩＤ都是一样的。参考三楼的。
MnZlZ 2014-12-28
  • 打赏
  • 举报
 回复 
                  @foreach (var item in Model.effModel)
                {
                        <input type="checkbox" id="@item.EFFECTIVE_ID" name="checkeff" value="@item.EFFECTIVE_ID"                   onmouseout="hidden()" onmousemove="show()"/>
                        <span>@item.EFFECTIVE_NAME</span>
                        <div id="note" style="display:none; position:absolute;z-index:1;" >@item.NOTE</div>                           
                }　</td>
请教一下，这种创建标签的方式没见过，用什么语言？ 一楼的意思就是你这种创建的方式得到的所有的chekbox具有相同的id，这种情况就相当于下面的一个例子： <input type=''checkbox' id='check' name='checkoff' value='check1' /> <input type=''checkbox' id='check' name='checkoff' value='check2' /> <input type=''checkbox' id='check' name='checkoff' value='check3' /> <input type=''checkbox' id='check' name='checkoff' value='check4' /> <input type=''checkbox' id='check' name='checkoff' value='check5' />' 当为上面的复选框指定事件是这样做的（按照你那种创建方式）： var check='document.getElementById('check'); 'check.onmouseout=hidden; check.onmouseover=show; 你可以看到了，因为id名称相同，执行事件的时候肯定不可能同时多可执行，所以只会选择执行第一个 一般在一个页面中是不允许id名称相同的，这样做麻烦太多 另解： 

  window.onload(){
     var checkboxs=document.getElementsByTagName('input');
     for(var i=0;i<checkboxs.length;i++){   //将你动态创建的标签再次循环一遍，避免使用了相同的id
         if(i){
            checkboxs[i].onmouserover=show;
            checkboxs[i].onmouseover=hidden;
         }
     }
     function show()
    {
        document.getElementById("note").style.display = "block";
    }
    function hidden()
    {
         
        document.getElementById("note").style.display = "none";
    }
  }
Stranger。 2014-12-28
  • 打赏
  • 举报
 回复
引用 1 楼 zzgzzg00 的回复:
id原则上不能重复 getElementById只会获取第一个 将事件绑定到父元素上 赢代理吧 为每个checkbox绑定一个事件消耗资源稍微有点浪费
没看懂什么意思？
似梦飞花 2014-12-28
  • 打赏
  • 举报
 回复
id原则上不能重复 getElementById只会获取第一个 将事件绑定到父元素上 赢代理吧 为每个checkbox绑定一个事件消耗资源稍微有点浪费
JS生成二维码
JS生成二维码，兼容各种浏览器及手机端，支持中文。
Java抓取网页数据Demo
Java抓取网页数据的两种方法：（1）抓取原网页 （2）抓取网页JS返回数据
js动态生成的id怎样获取,js动态id是什么意思呀
在JavaScript中，如果你想动态地给一个已经存在的元素添加一个id属性，你可以通过获取那个元素的引用，然后设置它的id属性来实现。大家好，小编来为大家解答以下问题，js动态生成的id怎样获取，js动态id是什么意思呀，现在让我们一起来看看吧！如果有多个div，querySelector将只返回第一个。如果你想给特定的div添加`id。作者：http://xkrj5.com 纯原创首发，转载保留版权！// 首先，获取那个要添加id的元素的引用。// 然后，设置id属性。
js如何获取动态生成的dom节点
应用场景-植入js脚本 植入js脚本对站点实现各种限制的难点在于，如何正确且及时的获取到需要操作的dom节点。 需要进行操作的dom节点可能不是一开始就出现在文档流当中，所以使用常规获取节点的方式并不能取到要操作的节点。 针对以上问题就需要有一个方法可以及时获取到节点（节点渲染到文档流中的时候及时获取到再进行对应的操作） listening()函数就是完成及时获取到动态节点的方法也是植入js脚本实现对站点各种限制的核心函数； 实现思路： 首先一个帧循环函数（setInterval）执行间隔就是速率，经过测
如何在JS遍历中动态增加id，获取动态的id
我在做自己的趣账本的时候，因为需要动态的遍历增加id，然后再去获取动态的id去进行相对应的操作，然后我就用了以下的写法，有需要的童鞋可以参考一下哈：       在遍历中动态添加id：""       获取动态的id：$("#ul"+i).append(cost_list);       因为我直接用了jquery，所以就直接使用jq去获取。
JavaScript

87,996

社区成员

224,708

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章