因此,我有一个包含多个div列表的索引页。每个div都有一个动态创建的ID,在这种情况下为edit _ 。我正在尝试编写一些jquery,以便当我将鼠标悬停在单个div上时,会显示一些隐藏的链接,或者当我单击该单个列表的编辑链接时,会弹出一个表单。我可以这样内联:
onclick="$('#edit_<%= address.id %>').dialog();"
但是一旦在我的application.js文件中是这样的:
$(document).ready(function() {
$('#edit_<%= @address.id%>').dialog();
});
没用现在我假设这是因为我在视图/控制器之外使用了该变量实际具有含义的位置。有针对这个的解决方法吗?
最佳答案
为所有目标DIV使用特定的类名称。即使您使用预定义的类名,即使它们具有动态ID,您也可以使用简单的jQuery找到它们。然后,您可以在应用程序JS文件中编写代码,并仅定位那些特定的类名。
更新:这是一个为您提供所需内容的示例。这是直接的HTML / Javascript,但是容器DIV使用唯一的ID,但是使用通用的类名。您可以轻松地将其移动到Rails应用程序中:
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<style>
.hidden-div {
border: 1px solid silver;
margin-bottom: 10px;
}
.hidden-div DIV {
display: none;
}
</style>
<script>
$(function() {
$(".hidden-div").hover(function() {
// we are hovering over a hidden-div class
$(this).children("div").show();
}, function() {
// we are moving out of a hidden-div class
$(this).children("div").hide();
});
});
</script>
</head>
<body>
<div id="random-id-1434" class="hidden-div">
Hover over me to reveal my hidden fields
<div>A hidden field</div>
<div>A hidden field</div>
<div>A hidden field</div>
<div>A hidden field</div>
</div>
<div id="random-id-342" class="hidden-div">
Hover over me to reveal my hidden fields
<div>A hidden field</div>
<div>A hidden field</div>
<div>A hidden field</div>
<div>A hidden field</div>
</div>
<div id="random-id-887" class="hidden-div">
Hover over me to reveal my hidden fields
<div>A hidden field</div>
<div>A hidden field</div>
<div>A hidden field</div>
<div>A hidden field</div>
</div>
</body>
</html>