Question

我使用best_in_place。

我尝试突出显示检查此行复选框的行。但它不起作用。

application.js：

$(document).ready(function() {
   jQuery(".best_in_place").best_in_place();
});


$('.highlight_on_success').bind("ajax:success", function(){
   $(this).closest('tr').effect('highlight'));
});

这是我的index.html.erb：

<html>
<body>
<h1>TODO TASKS</h1>

<table>
  <tr>
    <th>Done</th>
    <th>Admin Email</th>
    <th>Task</th>
    <th>Done</th>
  </tr>

<% @tasks_worker_todo.each do |task| %>
  <tr>
    <td = "done_id"> <%= best_in_place task, :done,:classes => 'highlight_on_success', type:     :checkbox, collection: %w[No Yes] %></td>
    <td><%= task.admin_mail %></td>
    <td><%= task.task %></td>
    <td><%= task.done %></td>
  </tr>
<% end %>
</table>

<br><br>
<br><br>

<h1>DONE TASKS</h1>
<table>
  <tr>
    <th>Done</th>
    <th>Admin Email</th>
    <th>Task</th>
    <th>Done</th>
  </tr>

<% @tasks_worker_done.each do |task| %>
  <tr>
    <td> <%= best_in_place task, :done, type: :checkbox, collection: %w[No Yes]%></td>
    <td><%= task.admin_mail %></td>
    <td><%= task.task %></td>
    <td><%= task.done %></td>
  </tr>
<% end %>
</table>

<br />
</body>
</html>

请帮忙！

更新

我尝试了下一行，但没有亮点：/

$('.highlight_on_success').bind($("#done_id")).click(function(){ 
    $(this).closest('tr').effect('highlight'));‌
});

这就是我的html看起来如此：

enter image description here

复选框位于绿线上方（从“是”更改为“否”）。

（与红线上方的列无关）

Answer 1

试试这个：

$('.highlight_on_success').on('click',function(){ 
    $(this).closest('tr').effect('highlight');‌
});

Answer 2

我在过去几个小时里一直在努力工作，并且让它发挥作用，而且还是如此;）

尝试将此（coffeescript）放入您的文件中，例如tasks.js.coffe：

jQuery ->
  $('.best_in_place').best_in_place()

$(".highlight_on_success").bind "ajax:success", ->
  $(this).effect "highlight",
    color: "red",
    1000

我已经半途而废，因为没有closest("tr")电话，我认为这不是致命的。

我研究了ajax:success，它用于best_in_place的每个输入和控制（包括复选框）。

以下是我show.html.haml中的内容：

%tr
  %td
    = best_in_place @product, :task, :type => :checkbox, :collection => ["Yes", "NOpe"], :classes => 'highlight_on_success'

如您所见，避免定义id，gem有自己的命名输入约定，因此无法更改复选框的id。

jquery：单击时，突出显示该行

2 个答案: