Question

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

当图像按钮被翻转时，我有一个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>

以下是渲染时的外观。在这个例子中有2个：

和

        <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%>');

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

Answer 1

这是我的通用建议。我假设你也在使用jQuery。

首先，当您要从JavaScript访问服务器端控件时，设置ClientIDs' mode to static总是有帮助的。

其次，为什么您的数据被传递到隐藏字段？它被修改并传回去了吗？如果没有，用于存储数据的HTML5标准具有data-attributeName="value"形式的属性。

这是你的.ASCX页面中的HTML：

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

在.NET端，您可以调用：

hfNarrative.Attributes.Add("data-narrativeDate", SOME_DATE);
hfNarrative.Attributes.Add("data-narrativeBy", SOME_GUY);

然后，使用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.
});

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

Answer 2

使用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，以及一个inputJSON = {'ctl00$m$g_90cae966_b430_4d11_8992_816553676250$ctl00$hfNarrativeBy':'ctl00_m_g_90cae966_b430_4d11_8992_816553676250_ctl00_hfNarrativeBy'}

的JSON数组

必须要说的是，这些名字和身份证都很糟糕。如果可能的话，你应该让它们更具语境性，语义性和相关性。

仅保留客户端控件ID

2 个答案: