1

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

我正在构建一个网络应用程序，您可以在其中喜欢答案，就像大多数社交应用程序一样。问题是，我不熟悉使用 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 %>

现在，对于'like'类的div，我编写了以下js（文档准备省略）：

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

“喜欢”类是点击心脏时将显示的 +1。

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

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

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

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

4

1 回答 1

1

jQuery最接近是理想的：

$(".heart-btn").click ->
  $(this).toggleClass('clicked')
  $(this).closest('.like').find(".liked").show().fadeOut(500)
于 2017-06-27T09:53:49.450 回答