Wie man Knopf wie ändert?

Question

Ich bin neu in Jquery und Ajax, ich würde gerne etwas Hilfe erhalten.

Wie konnte ich in diesem jQuery-Code hinzufügen:

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

diese Logik?

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

Ich brauche es für die Änderung der Schaltfläche Animationsstil. Danke.

Answer 1

toggleClass jquery-Methode wird zum Hinzufügen/Entfernen von Klassen zu den jquery-Selektoren verwendet. Erstellen Sie eine Klasse, die Sie zuerst umschalten müssen, und verwenden Sie dann toggleClass für einen jquery-Selektor. Wenn Sie überprüfen müssen, ob die Klasse bereits angewendet wurde oder nicht, können Sie die Methode hasClass jquery verwenden.

Answer 2

Ich habe eine Codezeile hinzugefügt, wo Sie das Hinzufügen der entsprechenden Klasse vornehmen sollten. Im Einzelnen:

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

Der vollständige Code hier, schön gegliederten:

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

Animationen in AngularJS einer anderen Art und Weise verwendet werden soll.

Es gibt 4 Arten von Animationen Veranstaltungen

• eingeben
• bewegt
• hinzufügen/entfernen Klasse

verlassen Wenn Sie es die 'Angular Weise' tun wollen mit Javascript, dann was Sie tun möchten, ist in diese Ereignisse einhaken.

Was möchten Sie in diesem Fall zum Ziel ist die Schaltfläche wie folgt aus:

(Aus der Dokumentation: 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); } } }]

Um in ein Event On-Click einhaken, dann enter, leave und move wird dir nicht viel nützen; Sie möchten einen Klassennamen zum click-Ereignis hinzufügen oder entfernen. Sie würden könnten die Klasse in einer Reihe von Möglichkeiten hinzufügen, aber hier sind ein Beispiel:

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

Sie müßten die Klasse an einem bestimmten Punkt zu entfernen, though. Der geeignetste Zeitpunkt wäre wahrscheinlich der Rückruf für dieses Ereignis mit der Animations-API von Angular. Etwas wie folgt aus:

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

Auch, um Eckige wissen, über Sie Hinzufügen und Klassen in Javascript zu entfernen, müssen Sie eine der Richtlinien verwenden, die mit kantigem versenden, oder verwenden Sie den $animate Dienst in Winkel . In Ihrem ersten Codebeispiel fügen Sie eine Klasse mit jQuery hinzu, Angular weiß jedoch nichts darüber.