2

所以我有一个包含多个 div 列表的索引页面。每个 div 都有一个动态创建的 id，在本例中为 edit_<%= address.id%>。我正在尝试编写一些 jquery，以便当我将鼠标悬停在单个 div 上时，会显示一些隐藏的链接，或者当我单击此单个列表的编辑链接时，会弹出一个表单。我可以像这样内联：

onclick="$('#edit_<%= address.id %>').dialog();"

但是一旦在我的 application.js 文件中是这样的：

$(document).ready(function() {
$('#edit_<%= @address.id%>').dialog();
});

它不起作用。现在我假设这是因为我在视图/控制器之外使用它，这个变量实际上是有意义的。有针对这个的解决方法吗？

4

3 回答 3

0

您试图在 JavaScript 文件中获取 rails 变量，但它不是这样工作的。我认为对您来说最简单的解决方案就是使用gon gem。

于 2013-04-09T21:23:17.213 回答
0

为所有目标 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>
于 2013-04-09T21:27:16.453 回答
0

确保您的所有 css 元素都具有相同的起始 id 或类，然后您可以使用与此类似的一些 jquery 来选择它们，它会选择在其 id 开头带有编辑的所有 div$('div[id^="#edit_"]').hover.dialog();

以下是有关如何使用此选择器的一些文档

http://api.jquery.com/attribute-starts-with-selector/

于 2013-04-09T21:40:35.710 回答