如何使用Rails的数据库记录ID为使用jQuery UI的选择？

Question

我填充基于使用一个数据库记录的迭代表“每做”循环。我想每个表CEL有一个jQuery UI的对话框点击CEL时可以开火。问题是，当一个CEL被点击，因为它们都使用相同的功能，它触发数百对话框。

我知道这是因为我使用的是类选择（类=“开门红”），但该ID选择不工作要么，我猜是因为有几百个，将共享ID表。

<table>
  <!-- Loop for each iteration of User -->
  <% @users.each do |user| %>
  <tr>
    <!-- The email address for current iteration of User -->
    <th style="padding:2.5px;" colspan="5">
      <%= user.email %>
    </th> 
    <!-- Loop for each iteration of a Field for User -->
    <% user.fields.reverse_each do |field| %>
    <td>
      <button class="opener"> Click to open dialog </button>
      <!--  When clicked, it should show a dialog box -->
      <div class="dialog" title="Dialog Title">
        <p>Dialog Content</p>       
      </div>
    </td>
    <!-- End of Field iterations -->
    <% end %>
  </tr>
  <!-- End of User iterations -->
  <% end %>
</table>

Ĵ苦厄RY了长子：

$(document).ready( function () {
  //= To prevent dialog box from opening automatically
  $( ".dialog" ).dialog({ autoOpen: false });

  //= Click HTML element with class ".opener" to open dialog boxes
  $(".opener").click(function () {
    //= Function for dialog box
    $( ".dialog" ).dialog( "open" );
  });
});

我想要做的是命名标记类或甚至作为标签ID“<％= field.id％>”用于在循环每次迭代中，使得产生的每个td标签（类/ ID）是独特的，以该记录迭代。我知道，那些Rails的标签抓住在HTML正确的数据库值，因为我查过，我只是不知道如何调用它的jQuery的UI功能。没什么我已经试过正致力于在这一方面（this.className / this.attr）。我必须做一个AJAX或JSON的实现。如果是这样，我怎么会去这样做呢？

在一个侧面说明，没有人知道是否Vue.js将是我想要做的更好？

谢谢你的帮助！

Answer 1

你有几个容器（<td>s你的情况），每个容器里面是一个按钮（.opener）和一个对话框（.dialog）。

大概最容易做的事情是在启动按钮，使用closest上去DOM的容器，然后回到现实中来使用find对话框：

$(".opener").click(function(ev) {
  let container = $(ev.currentTarget).closest('td'); // Or put a class on the <td> and use closest('.the_class_you_used')
  let dialog    = container.find('.dialog');
  dialog.dialog('open');
});

这就是你需要的，如果对话框的内容是静态的。你不只要按钮和对话是在一个共同的容器元素，并没有其它按键或对话框该容器中的所需要的field.id。

如果你确实需要的东西的field.id（说一个AJAX请求来填充对话框），那么你可以把数据属性上<td>：

<% user.fields.reverse_each do |field| %>
  <td data-field-id="<%= field.id %>">

然后抓住它你的JavaScript：

$(".opener").click(function(ev) {
  let container = $(ev.currentTarget).closest('td');
  let field_id  = container.data('field-id');

你也可以说let field_id = container.attr('data-field-id')如果你不想jQuery的尝试和解释属性的值。

---

如果您已经使用jQuery和jQuery UI的然后切换到Vue公司将只是一个小功能了很多工作。