如何在嵌套的 ASP.NET 列表视图中使用 jQuery 检测当前元素
Posted
技术标签:
【中文标题】如何在嵌套的 ASP.NET 列表视图中使用 jQuery 检测当前元素【英文标题】：How to detect current element using jQuery within nested ASP.NET listview 【发布时间】：2013-01-28 04:07:16 【问题描述】：我有一个嵌套列表视图，其中包含多行，每行包含一个 ddl 和一个文本框，例如：
<ItemTemplate>
<tr>
<td>
<asp:DropDownList id="myDDL" runat="server" CssClass="aDDL"
onfocus="javascript:$(function()
$(<selector>).siblings.RemoveClass('wrappedElement');
$(<selector>).addClass('wrappedElement');
)" /></td>
<td><asp:TextBox id="myTextBox" runat="server" CssClass="aTextBox"
onfocus="javaScript:$(function()
$(<selector>).siblings.RemoveClass('wrappedElement');
$(<selector>).addClass('wrappedElement');
)" /></td>
</tr>
</ItemTemplate>
我想要做的是包装被点击的元素。发生的事情是我包装了所有“aDDL”或“aTextBox”元素。我需要为刚刚关注的元素找到 选择器。
我尝试了this article，但“this”或 $(this) 最终指向整个文档。
【问题讨论】：
不是对您问题的回答，只是小评论：您不需要在事件处理程序上使用javascript: 前缀。只有在<a> 标记的href 中使用javascript 时才需要。
【参考方案1】：
我会尝试在模板之外的一个地方定义您的 javascript。像这样的东西（来自记忆）：
$(".aDDL").focus(function()
$(".wrappedElement").RemoveClass('wrappedElement');
$(this).addClass('wrappedElement');
);
// etc.
根据我的经验，通过选择器从元素外部分配函数比将它们设置为 html 标记的一部分效果更好。
【讨论】：
$(this) 选择整个窗口，而不是当前元素 出于好奇：如果按照 Sen Jacob 和我的建议，通过 jQuery 将处理程序附加到元素上，您是否还有 $(this) 问题？我想知道您附加函数的方式是否导致 $(this) 具有不同的含义。【参考方案2】：在 JavaScript 中
$(function()
$(".aDDL,.aTextBox").focus(function()
$(".aDDL,.aTextBox").RemoveClass('wrappedElement');
$(this).addClass('wrappedElement');
);
);
并将其用作您的项目模板
<ItemTemplate>
<tr>
<td>
<asp:DropDownList id="myDDL" runat="server" CssClass="aDDL" /></td>
<td>
<asp:TextBox id="myTextBox" runat="server" CssClass="aTextBox" /></td>
</tr>
</ItemTemplate>
如果您仍想内联，请尝试以下操作。
onfocus="$(function()
var $this = $(document.activeElement);
$this.siblings.RemoveClass('wrappedElement');
$this.addClass('wrappedElement');
)"
【讨论】：
$(this) 选择整个窗口，而不是当前元素。这就是我要解决的问题。 $(this) 指的是您用来触发事件的选择器元素。在您的情况下，您正在 document.ready 函数本身中添加/删除类，这就是您的 $(this) 引用当前文档的原因。 我在上面编辑了我的答案。请检查它是否对您有帮助。【参考方案3】：几个项目：
您不需要在代码前加上 javascript: 前缀，这仅适用于调用 href 属性 <a href="javascript:..."> 上的函数的链接元素。 （在这种情况下可能更好地绑定到click 事件。）
你也不需要用 jQuery 对象来包装你的内联函数。不要编码：onfocus="javaScript:$(function() )"，试试onfocus="function()"。
最后，您可以将event 对象作为处理程序调用的一部分传递，以获得对选择器的访问权限。不确定它是否可以内联：
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="Scripts/jquery-1.9.1.min.js"></script>
<script>
function select(e)
var selector = e.target; // "select#options"
var $selector = $(e.target) // jQuery object wrapping <select>
</script>
</head>
<body>
<select id="options" onfocus="select(event)">
<option value="1">Dog</option>
<option value="2">Cat</option>
<option value="3">Horse</option>
</select>
</body>
</html>
【讨论】：
安迪成功了。关键是要使用事件对象，因为它总是有一个明确的 event.target.id 值。 Bob，发现了这个，它可能会影响您的使用。 target 在使用 srcElement 的 IE 中不可用。用它来找到你的目标：var target = event.target || event.srcElement;***.com/a/5301667/64262以上是关于如何在嵌套的 ASP.NET 列表视图中使用 jQuery 检测当前元素的主要内容，如果未能解决你的问题，请参考以下文章
ASP.NET MVC 如何从嵌套对象的视图模型集合中动态创建表结构