Afficher uniquement un élément avec JQuery

Question

Je n'ai besoin d'afficher qu'un élément à la fois lorsqu'un clic est effectué sur un lien. En ce moment, je triche en cachant tout à nouveau et en basculant l'élément sur lequel je clique. Cela fonctionne, sauf si je veux que tout disparaisse à nouveau. A court d'ajouter un bouton/lien "Cacher tout", que puis-je faire? Je voudrais pouvoir cliquer à nouveau sur le lien et masquer son contenu.

EDIT: Le code de Pseudo aurait fonctionné, mais le code html ici vous a amené à croire que tous les liens étaient dans un div. Au lieu de chercher où ils étaient tous, il est plus facile de les appeler par leur carte d'identité.

Voici ce que j'ai jusqu'à présent:

$(document).ready(function(){ 
    //hides everything 
    $("#infocontent *").hide(); 

    //now we show them by which they click on 
    $("#linkjoedhit").click(function(event){ 
     $("#infocontent *").hide(); 
     $("#infojoedhit").toggle(); 
     return false; 
    }); 

    $("#linkgarykhit").click(function(event){ 
     $("#infocontent *").hide(); 
     $("#infogarykhit").toggle(); 
     return false; 
    }); 

}); 

et le code html ressemble:

<div id="theircrappycode"> 
    <a id="linkjoedhit" href="">Joe D</a><br/> 
    <a id="linkgarykhit" href="">Gary K</a> 
</div> 

<div id="infocontent"> 
    <p id="infojoedhit">Information about Joe D Hitting.</p> 
    <p id="infogarykhit">Information about Gary K Hitting.</p> 
</div 

il y a environ 20 liens comme celui-ci. Parce que je ne code pas le html actuel, je n'ai aucun contrôle sur la mise en page réelle, ce qui est horrible. Qu'il suffise de dire, c'est la seule façon d'organiser les liens/info.

Answer 1

$("#linkgarykhit").click(function(){ 
    if($("#infogarykhit").css('display') != 'none'){ 
     $("#infogarykhit").hide(); 
    }else{ 
     $("#infocontent *").hide(); 
     $("#infogarykhit").show(); 
    } 
    return false; 
}); 

---

On pourrait aussi DRY ce un peu:

function toggleInfoContent(id){ 
    if($('#' + id).css('display') != 'none'){ 
     $('#' + id).hide(); 
    }else{ 
     $("#infocontent *").hide(); 
     $('#' + id).show(); 
    } 
} 

$("#linkgarykhit").click(function(){ 
    toggleInfoContent('infogarykhit'); 
    return false; 
}); 

$("#linkbobkhit").click(function(){ 
    toggleInfoContent('infobobkhit'); 
    return false; 
}); 

Answer 2

Je viens de commencer avec jQuery, donc je ne sais pas si cela est stupide ou non.

function DoToggleMagic(strParagraphID) { 
    strDisplayed = $(strParagraphID).css("display"); 
    $("#infocontent *").hide(); 
    if (strDisplayed == "none") 
    $(strParagraphID).toggle(); 
} 
$(document).ready(function(){ 
    //hides everything 
    $("#infocontent *").hide(); 

    //now we show them by which they click on 
    $("#linkjoedhit").click(function(event){ 
    DoToggleMagic("#infojoedhit"); 
    return false; 
    }); 

    $("#linkgarykhit").click(function(event){ 
    DoToggleMagic("#infogarykhit"); 
    return false; 
    });   
}); 

Answer 3

Si votre balisage « schéma de nommage » est exacte, vous pouvez éviter beaucoup de code en utilisant un repetitious RegEx pour votre sélection, et l'utilisation judicieuse de « non » de jQuery.

Vous pouvez joindre un événement de clic une fois à une collection jQuery qui devrait faire ce que vous voulez et vous n'avez pas besoin d'ajouter de JavaScript que vous ajoutez Jim ou John, comme si:

$(document).ready(function() { 
    $("#infocontent *").hide(); 

    $("div#theircrappycode > a").click(function(event){ 
    var toggleId = "#" + this.id.replace(/^link/,"info"); 
    $("#infocontent *").not(toggleId).hide(); 
    $(toggleId).toggle(); 
    return false; 
    }); 
}); 

Answer 4

Voici une approche légèrement différente il y a quelques similitudes avec le code du Pseudo Masochiste.

$(document).ready(function(){ 
    $("#infocontent *").hide(); 
    $("#theircrappycode > a").click(statlink.togvis); 
}); 
var statlink = { 
    visId: "", 
    togvis: function(){ 
    $("#" + statlink.visId).toggle(); 
    statlink.visId = $(this).attr("id").replace(/link/, "info"); 
    $("#" + statlink.visId).toggle(); 
    } 
}; 

J'espère que vous trouverez cela utile aussi.