状态控制器

Question

所以我有一些可以喜欢/不喜欢的模特。我现在有一个按钮，一切都很完美，除了那个页面以前每次都要重新加载。

我现在把它作为一个ajax按钮，它可以很好地发布数据。但问题是它似乎有点被黑了。

如果页面加载时不喜欢帖子，则点击“喜欢”，心脏变红，标签显示为喜欢。如果再次单击该按钮，则不会发布帖子，但按钮标签和颜色不会更改。问题是，如果你一直点击按钮，它将继续POST不同的数据，即使它已经不受欢迎。如果在页面加载时喜欢帖子，则情况正好相反。它不断发布类似的数据。我有一个活动源，所以它会将相同的活动发布到一堆垃圾中。

这是我的代码;

状态控制器

def upvote
  @status = Status.find(params[:id])
  current_user.create_activity(@status, 'liked')
  @status.liked_by current_user
  respond_to do |format|
    format.html {redirect_to statuses_path }
    format.json { render json: @status }
   end
end

def downvote
  @status = Status.find(params[:id])
  @activity = Activity.find_by(targetable_id: @status)
  @activity.destroy!
  @status.downvote_from current_user
  respond_to do |format|
    format.html {redirect_to statuses_path }
    format.json { render json: @status}
  end
end

Application JS

$("#view-heart").click(function() {
  var id = this.getElementsByTagName('sub')[0].innerHTML

  if ($( "#test" ).hasClass( "red" )) {
    $(this).replaceWith('<span id="view-heart"><a href="' + 
    window.location.href + "/" + id + "/like" + '" action="upvote" data-
    method="put" class="item like-dislike" data-type="json" data-
    remote="true"><i class="fi-heart" id="test"></i><label>Like</label>
    </a></span>');
    $( "#test" ).removeClass( 'red' );
  } else {
    $(this).replaceWith('<span id="view-heart"><a href="' + 
    window.location.href + "/" + id + "/dislike" + '" action="downvote" 
    data-method="put" class="item like-dislike" data-type="json" data-
    remote="true"><i class="fi-heart red" id="test"></i>
    <label>Liked</label></a></span>');
  }
});

状态索引

<% if current_user.voted_up_on? status %>
  <span id="view-heart">
    <a href=" <%= "/statuses/"+ status.id.to_s + "/dislike" %>"    
    action="downvote" data-method="put" class="item like-dislike" data-
    type="json" data-remote="true">
      <i class="fi-heart red" id="test"></i>
      <label>Liked</label>
      <sub><%= status.id %></sub>
    </a>
  </span>
  <% else %>
   <span id="view-heart">
     <a href=" <%= "/statuses/"+ status.id.to_s + "/like" %>"    
     action="upvote" data-method="put" class="item like-dislike" data-
     type="json" data-remote="true">
       <i class="fi-heart" id="test"></i>
       <label>Like</label>
       <sub><%= status.id %></sub>
     </a>
   </span>
<% end %>

Github项目供参考（如果需要）https://github.com/JaredCowan/GA-Cohort-Network

非常感谢任何有助于清理和修复它的帮助！

Answer 1

问题是这段代码：

$("#view-heart").click(function() {...

仅将绑定 当前 #view-heart元素。

第一次单击它时，它会用新元素替换该元素，并且不会在新元素上重新建立单击绑定，因此后续单击不会调用JavaScript单击处理程序。

有一些可能的解决方案：

JavaScript代码可以操纵现有元素的属性，而不是替换整个元素。这可能是最简单的解决方案。

您可以使用jQuery＆＃39; s event delegation绑定到父元素，并与选择器匹配，而不是将click事件直接绑定到元素。这具有创造一个＆＃34; live＆＃34;将响应页面上的更改的事件处理程序。

例如：

$(document).on("click", "#view-heart", function() {...

除了响应DOM中的更改之外，如果页面上有许多匹配元素，这有时会带来性能优势。

您也可以同时使用这两种解决方案。

Answer 2

您遇到的主要问题是，在呈现.erb文件时，if语句只显示其中一个代码块。因此，如果帖子已经被喜欢，那么'if'语句的前半部分就会执行。此.erb不会在每次单击时重新加载，因此在页面上加载的表单将重复提交。你的javascript只是改变了'#test'的颜色。

考虑删除.erb文件中的“if”语句，然后渲染两个表单，然后根据模型是否“喜欢”隐藏一个表单。然后在单击时隐藏/取消隐藏每个按钮。每个按钮都会执行自己的个人提交。

Answer 3

对此的简单解决方案是每次都将两个链接放在那里，但是，您希望根据是否对其进行投票来更改堆叠顺序。因此，如果帖子已经被喜欢，则不喜欢按钮将位于顶部。如果单击该按钮，则会添加一个类以将其放在类似按钮后面。

<% if current_user.voted_up_on? status %>
  <span id="view-heart">
    <a href=" <%= "/statuses/"+ status.id.to_s + "/dislike" %>"    
action="downvote" data-method="put" class="item like-dislike" data-
type="json" data-remote="true">
         <i class="fi-heart red" id="test"></i>
         <label>Liked</label>
         <sub><%= status.id %></sub>
    </a>
    <a href=" <%= "/statuses/"+ status.id.to_s + "/like" %>"    
     action="upvote" data-method="put" class="item like-dislike" data-
     type="json" data-remote="true">
        <i class="fi-heart" id="test"></i>
        <label>Like</label>
        <sub><%= status.id %></sub>
     </a>
</span>
<% else %>
   <span id="view-heart">
     <a href=" <%= "/statuses/"+ status.id.to_s + "/like" %>"    
     action="upvote" data-method="put" class="item like-dislike" data-
     type="json" data-remote="true">
        <i class="fi-heart" id="test"></i>
        <label>Like</label>
        <sub><%= status.id %></sub>
     </a>
     <a href=" <%= "/statuses/"+ status.id.to_s + "/dislike" %>"    
     action="downvote" data-method="put" class="item like-dislike" data-
     type="json" data-remote="true">
         <i class="fi-heart red" id="test"></i>
         <label>Liked</label>
         <sub><%= status.id %></sub>
    </a>
   </span>
<% end %>

这现在成为一个简单的jquery解决方案，添加和删除类，以显示基于点击的一个或哪一个

Ajax喜欢/不像button4 90％工作的按钮

状态控制器

Application JS

状态索引

3 个答案: