Question

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

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

但在我的application.js文件中就像这样：

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

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

Answer 1

您正在尝试在JavaScript文件中获取rails变量，而这不是它的工作原理。我认为最简单的解决方案就是使用gon gem。

Answer 2

为所有目标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>

Answer 3

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

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

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

在Rails中如何获取具有动态创建的id的元素？

3 个答案: