使用 coffeescript 在嵌入式 ruby 循环中定位单个变量的 css class

Question

对于令人困惑的标题，我深表歉意。我不太确定如何描述这个问题，如果可能的话请建议其他标题！

我正在构建一个网络应用程序，您可以像大多数社交应用程序一样在其中点赞答案。问题是，我刚开始使用 coffeescript 和 erb，所以我不确定如何将我的 jQuery 动画定位到特定元素。

所以我的 html.erb 文件看起来像这样。它有一个 ERB 循环，我在其中检查每个答案并显示它。

<% @question.answers.each do |answer| %>
        <div class="row">
                <div class="col-lg-2 col-sm-2">
                    <div class="like">
                        <button class="heart-btn">
                        </button>
                        <div class="liked">
                            +1
                        </div>
                    </div>
                    <div class="option">
                        <a href='/'>Report</a>
                        <br><a href='/'>Edit</a>
                        <br>

                         <%= link_to 'Delete', question_answer_path(@question, answer), method: :delete, data: { confirm: 'Are you sure?' } %>  
                    </div>
                </div>
                <div class="col-lg-10 col-sm-10">
                    <div class="row" style="margin:0">
                        <!-- USER PROFILE -->
                        <a href='/users/2/profile'>
                            <div class="mini-profile">
                                <%= image_tag(@tutor.picture_url) %>
                                <ul style="list-style-type:none">
                                    <li class="username"><%= @tutor.username %></li>
                                    <li><i class="fa fa-flag" style="padding: 2px"></i><%= @tutor.country %></li>
                                    <li><i class="fa fa-graduation-cap"></i><%= @tutor.educational_level %></li>
                                </ul>
                            </div>

                        </a>
                    </div>
                    <div class="row">
                        <div class="ans-box">
                            <ul style="list-style-type:none">
                                <li><strong>This answer was written on:</strong> <%= answer.created_at %></li>

                                <li class="ans-content"><strong>This is my answer:</strong> <%= raw answer.answercontent %></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <hr class="line">
        <% end %>

现在，对于class'like'的div，我写了如下js（文档准备略）：

# Heart like
$(".heart-btn").click ->
    $(this).toggleClass('clicked')
    $(".liked").show().fadeOut(500)

'liked' class 是点击红心时显示的 +1。

但正如您可能想象的那样，这会使页面上的所有红心都显示“+1”。我只想定位被单击的 'answer' 的 'heart'。我想我可以通过将当前 'answer' 引用为 dom object 来做到这一点，但我不确定如何做到这一点。我的尝试是做类似的事情：

# Heart like
current_ans = <%= answer %>
$(".heart-btn").click ->
    $(this).toggleClass('clicked')
    current_ans.$(".liked").show().fadeOut(500)

但语法对我来说似乎很不对劲，而且似乎不起作用。

（我认为部分原因是我没有找到解决方案，因为我不能很好地表达我的问题。如果是这种情况请告知。谢谢！）

Answer 1

jQuery closest 最适合这个：

$(".heart-btn").click ->
  $(this).toggleClass('clicked')
  $(this).closest('.like').find(".liked").show().fadeOut(500)

使用 coffeescript 在嵌入式 ruby 循环中定位单个变量的 css class

Targeting css class of one single variable in embedded ruby loop using coffeescript

ruby-on-rails

embedded-ruby

coffeescript