Échange du contenu DIV à partir du même lien textuel

Question

J'ai des difficultés à résoudre un problème en utilisant le JavaScript traditionnel et je me demandais s'il y avait une solution facile à utiliser avec jQuery. J'ai cherché sur le web et n'ai pas été capable de trouver quoi que ce soit qui fasse exactement ce que je veux faire.

Donc .. c'est ce que je veux réaliser:
J'ai 2 div avec le contenu, le premier est affiché, le second est caché. Ci-dessous et en dehors de ces div j'ai un seul lien de texte qui, lors du premier clic, va permuter le contenu sur la première div avec la deuxième div. Lorsque je clique une seconde fois je veux qu'il revienne à la première div et ainsi de suite .. Il devrait basculer entre les 2 div sur chaque onClick chaque fois que je clique sur le lien de texte. Pour mettre un peu plus de contexte à cela, mes div contiennent un formulaire avec 2 étiquettes et entrées de texte. Dans le premier div les étiquettes disent To: et From: Dans la deuxième div, l'ordre est simplement retourné pour dire From: puis To:
Ci-dessous les entrées j'ai un lien texte qui permettra à l'utilisateur de passer la commande autour de de: et a:

Pour:
entrée texte
de:
entrée texte
- lien texte -

Lorsque le lien de texte est cliqué, je veux que le contenu remplacé par ce :

De:
entrée texte
Pour:
entrée texte

Voici un exemple de ce que j'ai essayé-Note: Ceci est très proche de la façon dont Je le veux sauf quand le lien est cliqué une deuxième fois, rien ne se passe

<script type="text/javascript"> 

<code>function hideID(objID){ 
var element = document.getElementById(objID); 
element.style.display="none"; 
} 
function showID(objID){ 
var element = document.getElementById(objID); 
element.style.display="block"; 
}</code> 

</script> 

<div id="div1">content 1</div> 

<div id="div2" style="display:none;">content 2</div> 

<a href="" onClick="hideID('div1');showID('div2'); return false;">Reverse</a> 

Si quelqu'un a des idées, je serais très reconnaissant
Sincères salutations~ declan

Answer 1

Si vous voulez le faire sans utiliser JQuery:

<a href="#" onclick="hideShow('div1', 'div2');return false;"> 

<script language='javascript'> 
function hideShow(divOneId, divTwoId) 
{ 
var divOne = document.getElementById(divOneId); 
var divTwo = document.getElementById(divTwoId); 


divOne.style.display = (divOne.style.display == 'none') ? 'block' : 'none'; 
divTwo.style.display = (divTwo.style.display == 'none') ? 'block' : 'none'; 


} 

</script> 

Answer 2

En utilisant jQuery, et en fonction de votre code que vous avez essayé de simplement montrer/cacher les divs, que diriez-vous (non testé):

$(document).ready(function() { 
    $("#div1").show(); 
    $("#div2").hide(); 
}); 

$("a#someIDhere").click(function() { 
    $("#div1").toggle(); 
    $("#div2").toggle(); 
}); 

l'étiquette de marquage <a> avec un ID que vous peut utiliser ci-dessus?

Answer 3

$('#yourReverseAnchor').click(function(e) { 
    var swap = $('div1').html(); 
    $('div1').html($('div2').html()); 
    $('div2').html(swap); 
} 

Answer 4

Il est assez simple en utilisant jQuery:

<script type="text/javascript"> 
$(document).ready(function() 
{ 
    var a = $('#a'), 
     b = $('#b'); 

    function swap() 
    { 
     var a_html = a.html(); 
     a.html(b.html()); 
     b.html(a_html); 
    } 

    $('#swap').click(swap); 
}); 
</script> 

<div id="a">first</div> 
<div id="b">second</div> 
<a id="swap">swap</a> 

Answer 5

Avec jQuery cela devient simplement:

<div id="div1">content 1</div> 
<div id="div2" style="display:none;">content 2</div> 
<a href="#" id="toggle">Reverse</a> 

et

$(function() { 
    $("#toggle").click(function() { 
    var div1 = $("#div1"); 
    if (div1.is(":hidden")) { 
     div1.show(); 
     $("#div2").hide(); 
    } else { 
     div1.hide(); 
     $("#div2").show(); 
    } 
    return false; 
    }); 
}); 

Il n'y a aucun point de manipulation du DOM dans ce cas sauf s'il y a quelque chose ne nous le dis pas. Il est plus facile de simplement cacher et montrer au besoin.