Question

我是jquery和ajax的新手，我想得到一些帮助。

我怎样才能添加这个jquery代码：

 $('.btn-likes').on('click', function() {
         $(this).toggleClass('liked');
       });

这个逻辑？

function addLikes(id,action) {
    $('.demo-table #tutorial-'+id+' li').each(function(index) {
        $(this).addClass('selected');
        $('#tutorial-'+id+' #rating').val((index+1));
        if(index == $('.demo-table #tutorial-'+id+' li').index(obj)) {
            return false;   }});
    $.ajax({
    url: "add_likes.php",
    data:'id='+id+'&action='+action,
    type: "POST",
    beforeSend: function(){
        $('#tutorial-'+id+' .btn-likes').html("<img src='LoaderIcon.gif' />");},
    success: function(data){
    var likes = parseInt($('#likes-'+id).val());
    switch(action) {
        case "like":
        $('#tutorial-'+id+' .btn-likes').html('<input type="button" title="Unlike" class="unlike" onClick="addLikes('+id+',\'unlike\')" />');
        likes = likes+1;break;
        case "unlike":
        $('#tutorial-'+id+' .btn-likes').html('<input type="button" title="Like" class="like"  onClick="addLikes('+id+',\'like\')" />')
        likes = likes-1;break;}
    $('#likes-'+id).val(likes);
    if(likes>0) {
        $('#tutorial-'+id+' .label-likes').html(likes+" Like(s)");
    } else {$('#tutorial-'+id+' .label-likes').html('');}}});
}

我需要它来改变按钮动画风格。感谢。

Answer 1

toggleClass jquery方法用于向jquery选择器添加/删除类。创建一个需要首先切换的类，然后使用toggleClass作为jquery选择器。如果需要检查是否已经应用了类，可以使用hasClass jquery方法。

Answer 2

我添加了一行代码，您应该在其中添加适当的类。具体做法是：

  if (likes > 0) {
    // Do addClass here
    $('#tutorial-'+id+' .label-likes').html(likes+" Like(s)").addClass('likes');
  } else {
    $('#tutorial-'+id+' .label-likes').html('');
  }

这里的完整代码很好地缩进了：

function addLikes(id,action) {
  $('.demo-table #tutorial-'+id+' li').each(function(index) {
    $(this).addClass('selected');
    $('#tutorial-'+id+' #rating').val((index+1));
    if (index == $('.demo-table #tutorial-'+id+' li').index(obj)) {
      return false;
    }
  });
  $.ajax({
    url: "add_likes.php",
    data:'id='+id+'&action='+action,
    type: "POST",
    beforeSend: function() {
      $('#tutorial-'+id+' .btn-likes').html("<img src='LoaderIcon.gif' />");
    },
    success: function(data) {
      var likes = parseInt($('#likes-'+id).val());
      switch(action) {
        case "like":
          $('#tutorial-'+id+' .btn-likes').html('<input type="button" title="Unlike" class="unlike" onClick="addLikes('+id+',\'unlike\')" />');
          likes = likes+1;break;
        case "unlike":
          $('#tutorial-'+id+' .btn-likes').html('<input type="button" title="Like" class="like"  onClick="addLikes('+id+',\'like\')" />')
        likes = likes-1;break;
      }
      $('#likes-'+id).val(likes);
      if (likes > 0) {
        // Do addClass here
        $('#tutorial-'+id+' .label-likes').html(likes+" Like(s)").addClass('likes');
      } else {
        $('#tutorial-'+id+' .label-likes').html('');
      }
    }
  });
}

Answer 3

AngularJS中的动画旨在以另一种方式使用。

有4种类型的动画事件

输入
假
移动
添加/删除课程

如果你想用javascript做'Angular way'，你想要做的就是挂钩这些事件。

在这种情况下，您想要定位的是这样的按钮：

（来自文档：https：//docs.angularjs.org/api/ngAnimate）

myModule.animation('.slide', [function() {
  return {
    // make note that other events (like addClass/removeClass)
    // have different function input parameters
    enter: function(element, doneFn) {
      jQuery(element).fadeIn(1000, doneFn);

      // remember to call doneFn so that angular
      // knows that the animation has concluded
    },

    move: function(element, doneFn) {
      jQuery(element).fadeIn(1000, doneFn);
    },

    leave: function(element, doneFn) {
      jQuery(element).fadeOut(1000, doneFn);
    }
  }
}]

要点击事件，enter，leave和move对您不会有好处;你想要的是在click事件上添加或删除一个类名。您可以通过多种方式添加该类，但这是一个示例：

<button ng-class="{'my-animation':model.animationOn}" ng-click="model.animationOn=true">My Button Text</button>

但是，您必须在某个时候删除该课程。最合适的时间可能是使用Angular的动画API在该事件的回调中。像这样：

myModule.animation('.my-btn', [function() {
  return {
    addClass: function(element, className, doneFn) {
      if(className == 'my-animation') {
        jQuery(element).fadeIn(1000, function() {
          doneFn(); // always call this when you're done
          element.removeClass('my-btn');
        });
      }
    }
  }
}]

，为了让Angular了解您在javascript中添加和删除类，您必须使用Angular附带的指令之一，或者使用$animate服务角。在您的第一个代码示例中，您使用jQuery添加了一个类，但Angular不会知道它。

如何改变按钮？

3 个答案: