HTML Helpers从模型属性生成ID。如果许多元素具有相同的ID，如何使用JavaScript和CSS定位1个特定元素？

Question

按照建议，JavaScript必须保存在物理上独立的文件中（以免干扰）。 那么，如何访问特定页面中的特定元素？ 我应该通过ID检测那些元素吗？ 这意味着即使两个元素不在同一页面中，它们也不能具有相同的ID。

好吧，例如，使用Html帮助器方法从模型的属性生成元素的名称+ id。 如果我在多个页面中使用相同的模型，则许多元素将具有相同的ID。 如何在不同页面中定位它们。 顺便说一下，CSS的工作方式相同。

编辑

假设我有这个

<% = Html.TextBoxFor(x => x.FirstName)%>

它将产生

<input type = "Text" name = "FirstName" id = "FirstName"/>

假设我有2个不同页面的文本框。 例如，如果要禁用位于页面A中的文本框，我要知道它们是2个不同页面中的两个，则该怎么做。 如何将它们与外部javascript文件区分开？

感谢您的帮助

Answer 1

我建议对于使用相同模型的每个页面，请创建一个包装器div

<div class="pageA">
   // the model stuff here
   <% = Html.TextBoxFor(x => x.FirstName)%> 
</div>

<div class="pageB">
   // the model stuff here
   <% = Html.TextBoxFor(x => x.FirstName)%>
</div>

然后使用Jquery选择器获取正确的元素$(".pageA input[name='FirstName']") （不确定此语法是否正确）。

Answer 2

好的JavaScript可能会保存在一个单独的文件中，也可能不会保存在一个单独的文件中，但它肯定是作为特定页面发送到浏览器的HTML的一部分。 我希望我已经理解了您的问题，但是，通常，如果您在文件中包含JavaScript代码，可以说utils.js然后在生成的html中应该包含（可能在<head>标记内）：

<script type="text/javascript" src="/path/to/utils.js"></script>

该脚本获得包含在页面，当浏览器遇到这种情形，它加载，然后运行该脚本，该页面。 因此，不同页面上的元素的id是什么并不重要。 这有意义吗，还是我完全误解了您的问题？

更新：

好的，所以根据您的评论，我想我明白了。 你有

//Page 1
//When loaded, this input should flash blue via javascript for example
<input id="firstName" .../>

和

//Page 2
//When loaded, this input has some other fancy effect/behaviour
<input id="firstName" .../>

在这种情况下，据我所知，答案只有两种。 有两个单独的外部js文件，每页一个，这样您就可以更改您的内容... 或 ...页面中有某种隐藏字段，可以告诉您脚本正在查看的页面（这看起来很hacky））

<input type="hidden" value="page1"/> //etc..

Answer 3

页面上不能有多个具有相同id元素。 那是无效的HTML 。

因此，当您多次使用同一个HTML帮助器时，您需要传递不同的名称：

<%: Html.TextBox("Foo", Model.Foo) %>
<%: Html.TextBox("Bar", Model.Bar) %>

Answer 4

如果我错了，请纠正我，但是您是在说，要在多个页面上添加一些具有相同ID的元素，并希望将其不同的行为附加到其中？ 如果是这样，那么这可以帮助您。 如果没有，那么克雷格会说什么。

您可以使用更具体的选择器，也可以在下面的文档中提供选择器上下文： http : //api.jquery.com/jQuery/
在此标题下：jQuery（selector，[context]），它解释了有关select和context的内容。 您应该能够使用此页面和一些创意页面构建来使用jQuery定位正确的元素。

Answer 5

因此，您有两个文件，每个文件都有一个ID为“ FirstName”的文本字段。 当您的脚本在页面A上运行时，您要禁用该字段，但在脚本在页面B上运行时则不要。

两页的结构是否相同？ 我怀疑您是否以不同的方式处理这些字段。 利用上下文使您受益。 就像如果页面A上的一个位于ID为“ thisDiv”的div中，而另一个位于ID为“ thatDiv”的div中，则可以document.getElementById('thisDiv') 。 如果得到一个元素，则禁用该字段，如果不执行任何操作。

如果您想获得更具体的答案，则必须为我们提供更多背景信息。

HTML Helpers从模型属性生成ID。如果许多元素具有相同的ID，如何使用JavaScript和CSS定位1个特定元素？

问题描述

5 个解决方案

解决方案1
2 已采纳 2010-07-29 14:00:47

解决方案2
1 2010-07-29 12:53:36

解决方案3
1 2010-07-29 13:01:32

解决方案4
1 2010-07-29 13:10:03

解决方案5
1 2010-07-29 14:15:08

HTML Helpers从模型属性生成ID。 如果许多元素具有相同的ID，如何使用JavaScript和CSS定位1个特定元素？

问题描述

5 个解决方案

解决方案1 2 已采纳 2010-07-29 14:00:47

解决方案2 1 2010-07-29 12:53:36

解决方案3 1 2010-07-29 13:01:32

解决方案4 1 2010-07-29 13:10:03

解决方案5 1 2010-07-29 14:15:08

HTML Helpers从模型属性生成ID。如果许多元素具有相同的ID，如何使用JavaScript和CSS定位1个特定元素？

解决方案1
2 已采纳 2010-07-29 14:00:47

解决方案2
1 2010-07-29 12:53:36

解决方案3
1 2010-07-29 13:01:32

解决方案4
1 2010-07-29 13:10:03

解决方案5
1 2010-07-29 14:15:08