Как изменить, как кнопка?

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, то то, что вы хотите сделать, связано с этими событиями.

То, что вы хотите, чтобы цель в данном случае это кнопка, как это:

(Из документов: 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 не принесет вам много пользы; вы хотите добавить или удалить имя класса в событии клика. Вы бы могли добавить класс в ряде способов, но вот один пример:

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

Вы должны были бы удалить класс в какой-то момент, хотя. Наиболее подходящее время, вероятно, будет в обратном вызове для этого события с использованием API анимации Angular. Что-то вроде этого:

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

Также, для того, чтобы Угловая знать о вас добавления и удаления классов в JavaScript, вы должны использовать одну из директив, которые поставляются с Угловое, или использовать $animate службу в угловой , В первом примере кода вы добавляете класс, используя jQuery, но Angular не будет знать об этом.