喜欢/不喜欢系统答案

【问题标题】：Like/dislike system喜欢/不喜欢系统
【发布时间】：2015-12-28 13:49:34
【问题描述】：

我的 Ruby on Rails 项目有一个喜欢/不喜欢系统。我想尽快编写我的代码并将处理程序放在一个函数中。所以这是我的js代码：

$(function(){  

  $(".action").click(function(){
      var current_post_tr = $(this).parents('tr')[0];
      var _this = this
      $.ajax({
      if url: 'http://localhost:3000/dashboard/' + $(current_post_tr).attr('data-post_id') +'/' ??
        type: 'PUT',
        success: function(data){
          //was disliked
          if (data.action==2){
            if (data.action==1){
              (".dislikeAction").text(data.post_dislikes);
            }
            $(".likeAction").text(data.post_likes);
          }
          if (data.action==4) {
            if (data.action==3){
              (".likeAction").text(data.post_dislikeslikes);
            }
          $(".dislikeAction").text(data.post_dislikes);
          }
        },
        error: function(data){
          alert(data.responseText);
          console.log(data); 
        }
    });
  });
});

我的 HTML 代码：

<tr data-post_id="<%= p.id %>">
 <td><b class="margin"><h4><%=p.text%></b></h4></td>
 <td>by <%= link_to User.find(p.user_id).username, profile_dashboard_path(p.user_id) %>&nbsp;&nbsp;</td>
 <td class="action"><span data-action="like" class="glyphicon glyphicon-thumbs-up likeAction"><%= p.likes_count %></span>
 <span data-action="like" class="glyphicon glyphicon-thumbs-down dislikeAction"><%= p.dislikes_count %></span>  </td>

我的问题：我怎么知道点击了哪个元素：带有likeAction 或dislikeAction 的span 标签。当我得到这个标签时，我可以根据点击的标签将 url 写到末尾。

【问题讨论】：

标签： jquery ruby-on-rails

【解决方案1】：

您的问题实际上在这里得到了回答

jQuery click event on parent, but finding the child (clicked) element

$(".action").click(function(event){
  var span = event.target;
  if ($(span).hasClass('likeAction')) {
  } else {
  }
  ...

});

另一种解决方案是在 span 元素上使用点击事件：

$(".action span").click(function(){
  var actionTd = $(this).parent('.action');
  if ($(this).hasClass('likeAction'))
  ...

【讨论】：

谢谢，它可能有效，但我怎样才能将我的网址保存到变量中？ if ($(span).hasClass('likeAction')) { var $url = "localhost:3000/dashboard' + $(current_post_tr).attr('data-post_id') +'/like'" } else { var $url = "localhost:3000/dashboard' + $(current_post_tr).attr('data-post_id') +'/dislike'" } $.ajax({ url: $url ，我认为它不起作用，问题出在我的初始化中
在这一行var $url = "localhost:3000/dashboard/'; + $(current_post_tr).attr('data-post_id') +'/like'" 你使用了错误的单引号和双引号。试试这个var $url = 'localhost:3000/dashboard/' + $(current_post_tr).attr('data-post_id') +'/like'

【解决方案2】：

制作一个单独的函数：

$(function(){
  function recordMood(el){
   var post_id = el.parent('tr').data('post_id');
   var mood = el.find('span').data('action');
   $.ajax({
      url: 'http://localhost:3000/dashboard/' + post_id +'/' + mood,
      type: 'PUT',
      success: function(data){
        if(data.action==2){
                if (data.action==1){
                  (".dislikeAction").text(data.post_dislikes);
                }
                $(".likeAction").text(data.post_likes);
              }
              if (data.action==4) {
                if (data.action==3){
                  (".likeAction").text(data.post_dislikeslikes);
                }
              $(".dislikeAction").text(data.post_dislikes);
              }
            },
            error: function(data){
              alert(data.responseText);
              console.log(data); 
            }
      })
      }

      $('.action').click(recordMood($(this)))

    });

编辑：不确定我写得是否完全正确，但我希望你能明白。你甚至可以用同样的方法改进success 函数。

如果两个操作都在做同样的事情，那么您应该避免使用条件语句，而是尝试提取函数，这样您就可以保持代码干枯，如果以后必须更改它，那么您只需一次性完成放置而不是两个（如在条件的两侧）

【讨论】：