如何改变喜欢按钮

How to change like button?

本文关键字：喜欢 按钮 改变 何改变      更新时间：2023-09-26

我是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('');}}});
}

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

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

我添加了一行代码，您应该在其中添加适当的类。具体来说:

  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('');
      }
    }
  });
}

AngularJS中的动画是另一种使用方式。

有4种类型的动画事件

  • 输入
  • <
  • 添加/删除类/gh>

如果你想用Angular的方式在javascript中实现它，那么你要做的就是钩入这些事件。

在本例中，您想要的目标是像这样的按钮:

(来自文档: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自带的指令之一，或者使用Angular中的$animate服务。在你的第一个代码示例中，你使用jQuery添加了一个类，但是Angular并不知道。

相关文章：