zwischen zwei Funktionen umschalten - jquery

Question

Ich versuche, zwischen zwei Funktionen zu wechseln, wenn ein "Gefällt mir" -Knopf angeklickt wird.

<div class="like"> 
    <div class="count"><%= post.num_likes %> </div> 
    <div class="icon" id="like"><i class="icon-thumbs-up-alt"></i></div> 
</div>  

jetzt habe ich:

$(".like").click(function(event){  
event.stopPropagation();      
$("i", this).toggleClass("icon-thumbs-up-alt").toggleClass("icon icon-thumbs-up");       
likePost(TestCanvas, $(this).prev('div').find('.hideThis').text());  
}); 

likePost (canvasID, postID) nimmt Parameter und interagiert mit einer API Wenn ich wieder auf .like klicken, ich möchte unlikePost() aufzurufen.

Gibt es eine einfache Möglichkeit, zwischen likePost() und im Gegensatz zuPost() zu wechseln, wenn .like angeklickt wird?

Ive versucht:

$('.like').toggle(function() { 
alert('First handler for .toggle() called.'); 
likePost(TestCanvas, $(this).prev('div').find('.hideThis').text()); 
}, function() { 
alert('Second handler for .toggle() called.'); 
unlikePost(TestCanvas, $(this).prev('div').find('.hideThis').text()); 
}); 

seine nicht funktioniert, wie ich es aber gedacht würde. Scheint beim Laden der Seite statt beim Klicken auf .like ausgeführt zu werden.

Answer 1

Edit: Siehe auch: https://stackoverflow.com/a/21520499/383904

LIVE DEMO

JS: eine userLikes Klasse zu Ihrem Element _{(wo das btn Argument der Verweis auf this ist geklickt Taste)}

function like(btn){ 
    alert("Liked "+ btn.textContent); // jQuery uses: $(btn) 
} 

function dislike(btn){ 
    alert("Disliked "+ btn.textContent); 
} 

$('.like').click(function(){ 
    $(this).toggleClass('userLikes'); 
    return $(this).hasClass('userLikes') ? like(this) : dislike(this); 
}); 

, wo Sie von Server-Seite lesen kann, wenn der Benutzer bereits gefallen hat, und befestigen:

<div class="like userLikes"> 
    <!-- ... --> 
</div> 

---

Ein einfaches Beispiel wäre (mit <span> Elemente):

LIVE DEMO

HTML:

<span class="like">0</span> 
<span class="like userLikes">3</span> 
<span class="like">6</span> 
<span class="like">12</span> 

CSS:

.like{ 
    border-radius:4px; 
    text-align:center; 
    display:inline-block; 
    padding:3px 10px; 
    background:#ddd; 
    cursor:pointer; 
    box-shadow: 0 1px 1px -1px #666; 
} 
.userLikes{ 
    background:#bada55; 
} 

JS:

function like(el,val){ 
    $(el).text(++val); 
} 

function dislike(el,val){ 
    $(el).text(--val); 
} 

$('.like').click(function(){ 
    var val = $(this).text(); 
    $(this).toggleClass('userLikes'); 
    return $(this).hasClass('userLikes') ? like(this,val) : dislike(this,val); 
}); 

Oder auch ohne die zwei Funktionen:

LIVE DEMO

$('.like').click(function(){ 
    var val = $(this).text(); 
    $(this).toggleClass('userLikes').text($(this).hasClass('userLikes') ? ++val : --val ); 
}); 

Answer 2

Nicht ganz sicher, was Sie fragen, aber das sollte tun, was Sie wollen, denke ich.

var myBool = true; 
$('.like').on('click', function() { 
    if (myBool) { 
    //function 1 here 
    } 
    else { 
    //function 2 here 
    } 
    myBool = !myBool; 
}); 

Edit: Hier ist ein Fiddle.

Answer 3

Sie können eine "gemocht" -Klasse hinzufügen, wenn Sie möchten.

$('.like').on('click', function() { 
    if $(this).hasClass("liked") { 
    //do unlike 
    $(this).removeClass("liked"); 
    } 
    else { 
    //do like 
    $(this).addClass("liked"); 
    } 
}); 

Answer 4

Sie können ein Element der eigenen Daten verwenden, den aktuellen Zustand des Toggle zu speichern $(this).data() verwenden. Dadurch können viele Instanzen Ihrer .like Elemente unabhängig voneinander arbeiten.

(Generell mag ich nicht class Werte verwenden, um tatsächlichen Programmstatus darzustellen. IMHO, Klassen sind für Styling, nicht Logik).

Da Ihre beiden Funktionen die gleichen Parameter haben, können Sie auch erhalten, nur einen Verweis auf die gewünschte Funktion basierend auf dem aktuellen Stand und dann rufen:

$(".like").on('click', function(event) { 
    // from OP's code 
    event.stopPropagation(); 
    $("i", this).toggleClass("icon-thumbs-up-alt icon icon-thumbs-up"); 

    // extract and toggle state (first click _sets_ state to "truthy") 
    var data = $(this).data(); 
    data.state ^= 1; 

    // determine which function to call, then call it - DRY 
    var fn = data.state ? likePost : unlikePost; 
    fn(TestCanvas, $(this).prev('div').find('.hideThis').text()); 
}); 

Answer 5

Verwenden Sie eine Klasse zu finden, wenn Inhalt gemocht wurde oder nicht:

$('.like').on('click', function(evt){ 
      evt.preventDefault(); 
      if($(this).is('liked')){ 
      $(this).removeClass('liked'); 
      doUnlike(); 
      } 
      else{ 
      $(this).addClass('liked'); 
      dolike(); 
      } 
     } 
    doUnlike(){ 
    //... 
    } 
    dolike(){ 
    //..... 
    } 

Answer 6

Seit toggleClass würde in das Hinzufügen und Entfernen Klasse werden Schalt die Art sowieso herum arbeiten. Und das Erstellen einer Variablen ist für mehrere Schaltflächen ungeeignet. Sie können eine Variable in einem versteckten Eingabe-Tag innerhalb der div/-Schaltfläche ausblenden und mit der find-Funktion darauf zugreifen. Das Skript wird die Werte umschalten und es wird der gewünschte Toggle-Effekt erzeugt, da die Toggle-Funktion keine zwei Funktionen mehr unterstützt und nur für das Ausblenden und Anzeigen verwendet wird.

Ein andere Möglichkeit:

<div class="like"> 
    <input type="hidden" value=0 /> 
    One 
    <div class="display"></div> 
</div> 
<div class="like"> 
    <input type="hidden" value=0 /> 
    Two 
    <div class="display"></div> 
</div> 
<script> 
    $(".like").click(function() { 
     var tagvar = "input[type='hidden']"; 
     if ($(this).find(tagvar).val() == 0) { 
      $(this).find(".display").html("yes"); 
      $(this).find(tagvar).val(1); 
     }else { 
      $(this).find(".display").html("no"); 
      $(this).find(tagvar).val(0); 
     } 
    }); 
</script>