JQuery pour échanger des éléments

Question

Mon script PHP crée une table avec plusieurs lignes d'éléments. Colonne1 dans chaque ligne affiche emptybox.jpg, et la dernière colonne est un lien d'ancrage pour sélectionner l'élément sur cette ligne:

output .= '<a href="./select_item.php id=select'.$product['id'].'"></a>'; 
output .= '<a href="./deselect_item.php id=deselect'.$product['id'].' style.display='"none"'"></a>'; 

(Notez que le style est inclus en ligne juste pour ce poste - tous les styles résident dans un css externe, et j'utilise un class = pour masquer tous les ancres désélectionnés par défaut)

Quand une ancre est cliquée (l'élément est sélectionné) je veux que jquery permute emptybox.jpg pour checkmark.jpg, et permute le " Sélectionnez "ancre pour l'ancre. Idéalement, ceux-ci devraient être des bascules, donc l'inverse fonctionnerait aussi (cliquer sur DeSelect cacherait à la fois checkmark.jpg et l'ancre DeSelect, et réaffichera à la fois emptybox.jpg et l'ancre Select).

Chaque icône de ligne est identifiée par une étiquette, avec le numéro de produit ajouté.

output .='<div class="checked" id="chk'.$product['id'].'"><img="checkmark.jpg" /></div>'; 
output .='<div class="empty" id="mt'.$product['id'].'" .style.display="none"><img="emptybox.jpg" /></div>'; 

Le code jquery doit identifier les « sélectionner » balise d'ancrage a été cliqué afin qu'il puisse afficher/masquer les paires d'éléments appropriés (emptybox.jpg/checkmark.jpg et sélectionner/desélectionner points d'ancrage). Voici ce que j'ai jusqu'à présent:

<script type="text/javascript"> 
$(function() { 
$("a").click(function(){ 
    $("#mt").hide(); 
    $("#chk").show(); 
    }); 
}); 

Answer 1

Pouvez-vous poster le code HTML réel d'un couple de lignes? Sans voir la structure HTML, il est difficile de vous donner une utilité jQuery.

Édition: OK. Utilisez la puissance de CSS pour simplifier la tâche. Je fais quelque chose comme ceci:

Ajouter ces CSS Styles:

tr td.artchek div.empty, tr td.arthref div.a_sel 
{ display: block; } 
tr.selected td.artchek div.empty, tr.selected td.arthref div.a_sel 
{ display: none; } 
tr td.artchek div.checked, tr td.arthref div.a_desel 
{ display: none; } 
tr.selected td.artchek div.checked, tr.selected td.arthref div.a_desel 
{ display: block; } 

Et cette jQuery:

$('td.artchek a').click(function() { 
    $(this).closest('tr').toggleClass('selected'); 
}); 

Answer 2

Vous pouvez utiliser quelque chose comme ceci:

<div class=line> 
    <a href="./select_item.php" class="select"></a> 
    <div class="empty"><img src="emptybox.jpg" /></div> 
</div> 

javascript:

$(".line").click(function(){ 
    var link = $(this).find("a"); 
    var checkbox = $(this).find("div"); 

    link.toggleClass("select"); 
    link.toggleClass("deselect"); 
    if(link.hasClass("select")) { link.attr("href","./select_item.php"); } 
    else { link.attr("href","./deselect_item.php"); } 

    checkbox.toggleClass("empty"); 
    checkbox.toggleClass("checked"); 
    if(checkbox.hasClass("empty")) { checkbox.find("img").attr("src","emptybox.jpg"); } 
    else { checkbox.find("img").attr("src","checkmark.jpg"); } 
} 

Ceci permet de basculer entre les classes et les propriétés. Les variables ne sont pas strictement nécessaires, mais cela facilite certainement la lecture et l'écriture du code.