javascript - 在 Rails 中,如何获取具有动态创建的 ID 的元素?

标签 javascript jquery ruby-on-rails

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

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

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

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

这是行不通的。现在我假设这是因为我在这个变量实际有意义的 View / Controller 之外使用它。有解决办法吗?

最佳答案

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

关于javascript - 在 Rails 中,如何获取具有动态创建的 ID 的元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15912729/

相关文章:

javascript - 是否可以禁用 html 中所需的 ='required' 验证?

javascript - 将选定的复选框复制到另一个 div 中

javascript - 如何使用 fullcalendar 在单元格中设置星期几和月份名称

javascript - 如何在 PHP echo 函数中插入 javascript?

ruby-on-rails - nil:NilClass的未定义方法“all_text_fields”

javascript - Rails + Javascript + 未捕获的类型错误 : Object #<Object> has no method

ruby-on-rails - 如何使用 Ruby 元编程向 Rails 模型添加回调?

javascript - 如何在 Semantic-react-ui 的模态屏幕上显示弹出窗口?

jquery - 插件中的回调函数

javascript - 数据表:DataTables_selected