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标签。当我得到这个标签时，我可以根据点击的标签将网址写到最后。

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 event on parent, but finding the child (clicked) element

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

});

另一个解决方案是在span元素上使用click事件：

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

喜欢/不喜欢系统

2 个答案: