喜欢/不喜欢系统

Question

我在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写入结尾。

Answer 1

做一个单独的功能：

$(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功能。

如果两个动作都在做相同的事情，则应避免使用条件语句，而应尝试提取函数，这样可以使代码保持干燥，并且如果以后需要更改它，则只需要在一个位置进行操作即可，而不是两个（如条件的两边）

Answer 2

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

父级上的jQuery click事件，但找到子级（单击）元素

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

});

另一种解决方案是对跨度元素使用click事件：

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