因此,我有一个包含多个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>

09-10 01:22
查看更多