jQuery toggle() avec état initial inconnu

Question

J'ai un projet sur lequel je travaille qui utilise une petite image pour marquer un enregistrement comme favori sur plusieurs lignes dans un tableau. Les données sont extraites d'une base de données et l'image est basée sur le fait que cet élément est favori ou non. Une image pour un favori, une image différente si ce n'est pas un favori. Je veux que l'utilisateur puisse basculer l'image et en faire un favori ou non. Voici mon code:

$(function() { 
    $('.FavoriteToggle').toggle(
     function() { 
     $(this).find("img").attr({src:"../../images/icons/favorite.png"}); 
     var ListText = $(this).find('.FavoriteToggleIcon').attr("title"); 
     var ListID = ListText.match(/\d+/); 
     $.ajax({ 
      url: "include/AJAX.inc.php",  
      type: "GET", 
      data: "action=favorite&ItemType=0&ItemID=" + ListID,   
      success: function() {}  
     }); 
     }, 
     function() { 
     $(this).find("img").attr({src:"../../images/icons/favorite_not.png"}); 
     var ListText = $(this).find('.FavoriteToggleIcon').attr("title"); 
     var ListID = ListText.match(/\d+/); 
     $.ajax({ 
      url: "include/AJAX.inc.php",  
      type: "GET", 
      data: "action=favorite&ItemType=0&ItemID=" + ListID,   
      success: function() {}  
     }); 
     } 
    ); 
}); 

Fonctionne bien si l'état initial n'est pas un favori. Mais vous devez double-cliquer pour obtenir l'image à changer si c'est un favori au départ. Cela provoque l'AJAX à tirer deux fois et essentiellement en faire un favori, puis pas un favori avant que l'image répond. L'utilisateur pense qu'il en a fait un favori parce que l'image a changé, mais en fait, ce n'est pas le cas. Aidez quelqu'un?

Answer 1

ne sais pas si cela va la bonne direction pour vous - mais je l'utilise habituellement en fonction de bascule - et avec un certain php supplémentaire je peux même l'ajuster à l'un ou l'autre état initial:

<style type="text/css"> 
<!-- 
.mybox_edit { 
display: none; 
} 
--> 

</style> 

<script language="JavaScript" type="text/JavaScript"> 
<!-- 

function toggleBox(box_id) { 
var box_edit = document.getElementById(box_id + "_edit"); 
var box_show = document.getElementById(box_id + "_show"); 

// is it hidden? 
if (box_show.style.display == 'none') { 
box_show.style.display = 'block'; 
box_edit.style.display = 'none'; 
} else { 
box_show.style.display = 'none'; 
box_edit.style.display = 'block'; 
} 
} 
//--> 
</script> 

Answer 2

Ajoutez une classe au favoriToggle qui définit l'état. Utilisez-le pour définir le CSS pour votre icône plutôt que d'échanger l'image. Ensuite, il vous permet de comprendre facilement l'état du favoriToggle.

$(function() { 
$('.FavoriteToggle').click(function(){ 
    var $this = $(this); 
    var id = $this.find('.FavoriteToggleIcon').attr("title").match(/\d+/); 
    if ($this.hasClass('isFavorite')){ 
     $this.removeClass('isFavorite'); 
    } else { 
     $this.addClass('isFavorite'); 
    } 
    $.ajax({ 
     url: "include/AJAX.inc.php",  
     type: "GET", 
     data: "action=favorite&ItemType=0&ItemID=" + id,   
     success: function() {}  
    }); 
}) 
}); 

Ajouter à votre css:

.FavoriteToggle .icon{ 
    background: url("../../images/icons/favorite_not.png"); 
} 
.FavoriteToggle.isFavorite .icon{ 
    background: url("../../images/icons/favorite.png"); 
} 

En faisant cela, vous gagnez avoir une classe qui définit l'état de sorte que vous pouvez faire plus de simplement changer l'image avec si vous le souhaitez, et fait en sorte que vous définissez des chemins d'image dans votre javascript qui est toujours sale.

Answer 3

$(function() { 
    // toggle on click 
    $('.FavoriteToggle').click (function() { 
    // prevent duplicate AJAX request with a "loading" flag 
    if (!this.isLoading) { 
     var $img = $(this).find("img"); 
     var ListID = $(this).find('.FavoriteToggleIcon').attr("title").match(/\d+/); 

     // flag that we are currently loading something 
     this.isLoading = true;  

     // determine the action from the current state of the img 
     if ($img.attr("src").indexOf("favorite.png") > -1) 
     var actionVerb = "unFavorite"; 
     else 
     var actionVerb = "mkFavorite"; 

     $.ajax({ 
     url: "include/AJAX.inc.php",  
     type: "GET", 
     data: {action: actionVerb, ItemType: 0, ItemID: ListID }, 
     success: function($i) { 
      return function() { 
      // change image on success only 
      if ($i.attr("src").indexOf("favorite.png") > -1) { 
       $i.attr("src", "../../images/icons/favorite_not.png"; 
      else 
       $i.attr("src", "../../images/icons/favorite.png"; 
      }; 
     }($img), 
     error: function(xhr, textStatus, errorThrown) { 
      // make some note of the error 
      alert(textStatus); 
     } 
     complete: function(p) { 
      return function(xhr, textStatus) { 
      // set loading flag to false when done 
      p.isLoading = false; 
      }; 
     }(this) 
     }); 
    } 
    }); 
}); 

Non testé, mais vous devriez avoir l'idée.

Le tout if ($img.attr("src").indexOf("favorite.png") choses pourrait beaucoup plus facilement être fait en ajoutant une classe CSS favorite au <img>. Par exemple, dans la fonction principale:

var actionVerb = $img.is(".favorite") ? "unFavorite" : "mkFavorite"; 

et, dans le rappel success:

if ($i.is(".favorite")) 
    $i.attr("src", "../../images/icons/favorite_not.png"; 
else 
    $i.attr("src", "../../images/icons/favorite.png"; 

// now toggle the CSS class 
$i.toggleClass("favorite") 

Answer 4

Eh bien, voici ce que j'ai fini avec, une version simplifiée de PetersenDidit's post ci-dessus.

$('.FavoriteToggle').click(function() { 
    var id = $(this).attr("title").match(/\d+/); 
    if ($(this).hasClass('isFavorite')) { 
     $(this).removeClass('isFavorite'); 
    } else { 
     $(this).addClass('isFavorite'); 
    } 
    $.ajax({ 
     url: "include/AJAX.inc.php", 
     type: "GET", 
     data: "action=favorite&ItemType=0&ItemID=" + id, 
     success: function() { 
     } 
    }); 
});