Javascript 仅保留客户端控件id

我有一种情况，我有许多对象是在代码隐藏中动态创建的。每个对象都有许多隐藏字段和一个图像按钮

当图像按钮滚动时，我有一个js文件，该文件应该获取该对象的相关字段并执行一些操作

我遇到的问题是，当我滚动按钮时，会得到一个空引用，因为getEmelementById不知道我引用的是哪个对象

以下是ascx页面：

    <div style="position:relative;float:right;" visible="true">
    <asp:ImageButton ID="iconNarrative" visible="true" ImageUrl="/_layouts/images/osys/NarrativeIcon.gif" runat="server" Style="position:absolute; top:-28px; left:-25px; display:block;" onmouseout="hideNarrative()" onmouseover="showNarrative(this, document.getElementById(id))" />
    <asp:HiddenField ID="hfNarrative" runat="server" Visible="true" />        
</div>    

下面是渲染时的外观。在这种情况下，有两种情况：

及

        <div style="position:relative;float:right;" visible="true">
    <input type="image" name="ctl00$m$g_90cae966_b430_4d11_8992_816553676250$ctl00$iconNarrative" id="ctl00_m_g_90cae966_b430_4d11_8992_816553676250_ctl00_iconNarrative" onmouseout="hideNarrative()" onmouseover="showNarrative(this, document.getElementById(id))" src="/_layouts/images/osys/NarrativeIcon.gif" style="border-width:0px;position:absolute; top:-28px; left:-25px; display:block;" />
    <input type="hidden" name="ctl00$m$g_90cae966_b430_4d11_8992_816553676250$ctl00$hfNarrative" id="ctl00_m_g_90cae966_b430_4d11_8992_816553676250_ctl00_hfNarrative" />        
    <input type="hidden" name="ctl00$m$g_90cae966_b430_4d11_8992_816553676250$ctl00$hfNarrativeDate" id="ctl00_m_g_90cae966_b430_4d11_8992_816553676250_ctl00_hfNarrativeDate" />
    <input type="hidden" name="ctl00$m$g_90cae966_b430_4d11_8992_816553676250$ctl00$hfNarrativeBy" id="ctl00_m_g_90cae966_b430_4d11_8992_816553676250_ctl00_hfNarrativeBy" />
</div>  

这是我的javascript

var narrativeContainer = document.getElementById('narrative_container');
var narrative = document.getElementById('<%=hfNarrative.ClientID%>');
var narrativeBy = document.getElementById('<%=hfNarrativeBy.ClientID%>');
var narrativeDate = document.getElementById('<%=hfNarrativeDate.ClientID%>');  

narrative = document.getElementById('<%=hfNarrative.ClientID%>');

var-annotivecontainer=document.getElementById（“叙述容器”）；
var叙事=document.getElementById（“”）；
var-annotiveby=document.getElementById（“”）；
var叙事日期=document.getElementById（“”）；
叙述=document.getElementById（“”）；

那么，我现在该如何调用哪一组隐藏字段呢？ 我能想到的唯一一件事就是获取Id并将其发送到各个字段，然后使用getElementById？

使用jQuery：

$('input[type=image]).hover(function() {
  var myElemID = $(this).attr('id'), inputJSON = {};
  $(this).parent().children('input').each(function(i) {
    inputJSON[$(this).attr('name')] = $(this).attr('id');
  });
});

这将为您提供一个带有图像输入ID的变量myElemID，以及一个JSON数组

inputJSON={'ctl00$m$g_90cae966_b430_4d11_8992_816553676250$ctl00$hfannotiveby'：'ctl00_m_g_90cae966_b430;_4d11_8992_816553676250_hfannotiveby'

---

不得不说，那些名字和身份证都很糟糕。如果可能的话，你应该让它们更具上下文、语义和相关性。

以下是我的一般建议。我假设您也在使用jQuery

首先，如果设置从JavaScript访问服务器端控件的时间，这总是很有帮助的

其次，为什么要将数据传递到隐藏字段中？是否修改并传回？如果不是，HTML5存储数据的标准是以

data attributeName=“value”

形式的属性

以下是您的.ASCX页面中的HTML：

<div id="hfNarrative" class="narratives" runat="server">
   <!-- Stuff specific to this object, image, buttons, whatever -->
</div>

然后，使用jQuery，您可以简单地访问以下内容：

$('div.narratives').each(function() {
    var $this = $(this);
    var narrBy = $this.attr('data-narrativeBy');
    var narrDat = $this.attr('data-narrativeDate');
    //Do stuff here with the data.
});

---

我希望这将帮助你走上一条更干净的道路。

只是一些有用的提示：1）永远不要使用内联样式。也许这只是说明问题，但似乎与你的问题无关，所以请隐藏你的羞耻2） 您将此发布到了

jquery

，因此我假设您熟悉不引人注目的JavaScript。但是，您似乎根本没有使用它。您实际使用的是jQuery库还是简单的JavaScript？最好的答案取决于你要走哪条路线（不管怎么说，就代码细节而言）。哦，而且当你的控件没有设置为

runat=“server”

时，

visible=“true”

不会做任何事。输入得好-

getEmelementById

不存在。改为尝试

getElephantById

）说真的，亚当·特尔森说的。如果您只想在滚动另一个元素时显示一些元素，那么jQuery非常简单。

$('div.narratives').each(function() {
    var $this = $(this);
    var narrBy = $this.attr('data-narrativeBy');
    var narrDat = $this.attr('data-narrativeDate');
    //Do stuff here with the data.
});