Javascript 在Rails中，如何在将呈现的集合传递给分部后使用Jquery

我正在Rails中制作一个简单的待办事项列表。我所看到的教程告诉我创建一个迁移，这样我就可以遍历每一项来检查它们。我不明白为什么我需要麻烦服务器只是为了让一些单词被打通，所以我尝试使用jquery来完成这项工作。以下是我的部分渲染集合：

#application.css.scss:

.stroked { 
  text-decoration: line-through;
 opacity: 0.4;
}

# _todo_item.html.erb

<script>
  $(document).ready(function() {
    $('.fa-check').on('click', function(){
      $('p').toggleClass('stroked');
    });
  });
</script>

<div class="row clearfix">
  <div class="complete">
    <i class="fa fa-check"></i>
</div>

<div class="todo_item">
  <p><%= todo_item.content %></p>
</div>

<div class="trash">
  <%= link_to todo_list_todo_item_path(@todo_list, todo_item.id), 
    method: :delete, data: { confirm: "Are you sure?" }  do %>
    <i class="fa fa-trash"></i>
  <% end %>
</div>

#application.css.scss：
.stroked{
文字装饰：线条贯通；
不透明度：0.4；
}
#_todo_item.html.erb
$（文档）.ready（函数（）{
$（'.fa check'）。在（'click'，function（）上{
$（'p'）.toggleClass（'stroked'）；
});
});

---

我可以让jquery在分部之外工作，但我不希望所有带有p标记的内容都被删除，只希望删除该特定项。

您可以使用

this

：

<script>
  $(document).ready(function() {
    $('.fa-check').on('click', function(){
      $(this).toggleClass('stroked');
    });
  });
</script>

$（文档）.ready（函数（）{
$（'.fa check'）。在（'click'，function（）上{
$（this.toggleClass（'stroked'）；
});
});

因此，在综合了Thanh和Shannon所说的内容之后，我找到了如下所示的解决方案：

# todo_lists/show.html.erb

<% i = 0 %>
<% @todo_list.todo_items.each do |todo_item| %>

  <script>
    $(document).ready(function() {
      $('.mark<%= i %>').on('click', function(){
        $('.line<%= i %>').toggleClass('stroked');
      });
    });
  </script>

  <div class="row clearfix">
    <div class="complete">
      <i class="fa fa-check mark<%= i %>"></i>
    </div>

    <div class="todo_item">
      <p class="line<%= i %>"><%= todo_item.content %></p>
    </div>

    <div class="trash">
      <%= link_to todo_list_todo_item_path(@todo_list, todo_item.id), 
        method: :delete, data: { confirm: "Are you sure?" }  do %>
        <i class="fa fa-trash"></i>
      <% end %>
    </div> 
  </div>

  <% i += 1 %> 
<% end %>

#待办事项列表/show.html.erb
$（文档）.ready（函数（）{
$（'.mark'）。在（'click'，function（）上{
$（'.line'）.toggleClass（'stroked'）；
});
});

---

现在，每个项目都可以单独删除/取消删除，而不必麻烦服务器。谢谢大家。

但我想删去todo_item.content这段文字。“此”仅指检查图标。奇怪的是，我甚至不能在todo_item.content上调用简单的内联JS。你可以使用类似

.parent（）

的东西，例如

$（this.parent（）.toggleClass（'stroked'）

仍然无法捕获todo_item.content，这是我正在尝试更改的内容。您可以使用

$（this.closest（“p”）.toggleClass（“stroked”）获取最接近的
p
标记。不过，更好的办法是对每个项目的类进行编号，例如
todo_item_1
，以便您可以轻松选择该类如何
$（'.todo_item>p'）。toggleClass（'stroked'）？这似乎也不起作用。您可以尝试将脚本移到分部之外。