버튼처럼 바꾸는 방법?

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 선택기에 추가/제거하는 데 사용됩니다. 먼저 토글해야하는 클래스를 만든 다음 jquery 선택기로 toggleClass를 사용합니다. 클래스가 이미 적용되었는지 여부를 확인해야하는 경우 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(''); 
    } 

여기에 전체 코드, 잘 들여 쓰기 :

AngularJS와는 다른 방법을 사용하기위한 것입니다 애니메이션에

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

.

애니메이션 이벤트의 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은별로 도움이되지 않습니다. 원하는 것은 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'); }); } } } }]

, 각도 위해서는 당신이 추가하고 자바 스크립트 클래스를 제거에 대해 알고, 당신은 각도와 함께 제공되는 지침 중 하나를 사용하거나 각도에 $animate 서비스를 사용해야합니다 . 첫 번째 코드 예제에서는 jQuery를 사용하여 클래스를 추가하지만 Angular는이를 알 수 없습니다.