toggleClass in Ajax Anfrage funktioniert nicht

Question

Ich habe ein kleines Problem, meine .toggleClass zu arbeiten. Ich bin sehr neu in Javascript, also vergib mir, wenn ich etwas wirklich einfaches hier vermisse. Ich möchte, dass Benutzer Lieblingsdinge wie Bilder und Posts nutzen können. Ich habe ein kleines Herz-Symbol, das beim Klicken rot/schwarz wird, je nachdem, ob sie hinzugefügt/entfernt werden. Alles funktioniert abgesehen von der .toggleClass. Kann jemand darauf hinweisen, wo ich falsch liege?

index.php

---

<div class="heart-box"> 
    <?php 
//Check if user has fav'd the image.. 
    $hasFav = db::getInstance()->query("SELECT * FROM favourites WHERE userID = ? AND img_id = ?", array($the_user, $img_id)); 
    $action = $hasFav->results() ? 'unfav-heart' : 'fav-heart'; 
    ?> 

    <div class="<?php echo $action; ?> fa fa-heart" id="<?php echo $img_id; ?>" ></div> 
</div> 

---

Script

---

$(document).ready(function(){ 


    //add to favourites... 
    $('.fav-heart').click(function(){ 
    var img_id = $(this).attr('id'); 
    $.ajax({ 
     url: 'favourites.php', 
     type: 'post', 
     async: false, 
     data:{ 
     'fav' : img_id 
     }, 
     success:function(){ 
     $(img_id).toggleClass("unfav-heart"); 
     } 
    }); 
    }); 
    // remove from favourites... 
    $('.unfav-heart').click(function(){ 
    var img_id = $(this).attr('id'); 
    $.ajax({ 
     url: 'favourites.php', 
     type: 'post', 
     async: false, 
     data:{ 
     'fav' : img_id 
     }, 
     success:function(){ 
     $(img_id).toggleClass("fav-heart"); 
     } 
    }); 
    }); 
}); 

---

Answer 1

JQuery ids braucht einen # in dem Selektor:

$(document).ready(function(){ 


    //add to favourites... 
    $('.fav-heart').click(function(){ 
    var img_id = $(this).attr('id'); 
    $.ajax({ 
     url: 'favourites.php', 
     type: 'post', 
     async: false, 
     data:{ 
     'fav' : img_id 
     }, 
     success:function(){ 
     $("#"+img_id).toggleClass("unfav-heart"); 
     } 
    }); 
    }); 
    // remove from favourites... 
    $('.unfav-heart').click(function(){ 
    var img_id = $(this).attr('id'); 
    $.ajax({ 
     url: 'favourites.php', 
     type: 'post', 
     async: false, 
     data:{ 
     'fav' : img_id 
     }, 
     success:function(){ 
     $("#"+img_id).toggleClass("fav-heart"); 
     } 
    }); 
    }); 
}); 

Answer 2

Wie in der anderen Antwort darauf hingewiesen, ausgelassen Sie den # Präfix eine ID in einem Selektor anzuzeigen. Es ist jedoch nicht notwendig, einen Selektor zu verwenden, da eine Variable direkt auf das Element zeigt.

$('.fav-heart').click(function(){ 
    var img = $(this); 
    var img_id = this.id; 
    $.ajax({ 
     url: 'favourites.php', 
     type: 'post', 
     async: false, 
     data:{ 
     'fav' : img_id 
     }, 
     success:function(){ 
     img.toggleClass("unfav-heart"); 
     } 
    }); 
    }); 

Answer 3

Ihre Click-Handler für beide Selektoren sind am Dokument bereit. Aus diesem Grund werden nur die Elemente, die den Selektorklassen entsprechen, dem Click-Handler zugewiesen. Wenn Sie die Klasse anschließend umschalten, müssen Sie die Click-Handler neu zuweisen.

Ein besserer Ansatz wäre, einen Click-Handler für alle Herzelemente zu registrieren. Innerhalb des Click-Handlers führen Sie eine Switch-Case-Anweisung aus, bei der Sie die Klasse entsprechend umschalten.