Поменять местами содержимое div с той же текстовой ссылки

Question

У меня возникли проблемы с решением проблемы с использованием традиционного JavaScript, и мне было интересно, есть ли простое решение с использованием jQuery. Я искал в Интернете и не смог найти ничего, что бы точно соответствовало тому, что я хочу.

Итак ... вот чего я хочу достичь:
У меня есть 2 div с содержимым, первый отображается, второй скрыт. Ниже и вне этих div у меня есть одна текстовая ссылка, которая при первом нажатии поменяет содержимое первого div со вторым div. При повторном нажатии я хочу, чтобы он переключился обратно на первый div и т. Д. Он должен переключаться между 2-мя div каждого onClick каждый раз, когда я нажимаю текстовую ссылку.

Чтобы добавить немного контекста, мои div содержат форму с 2 метками и текстовыми вводами. В первом блоке надписи обозначают To: и From: во втором блоке порядок просто переворачивается, чтобы сказать From: и затем To:
Под входами у меня есть текстовая ссылка, которая позволит пользователю переключать порядок вокруг до: и до:

Кому:
ввод текста
От:
ввод текста
- Текстовая ссылка -

Когда нажата текстовая ссылка, я хочу заменить содержимое следующим:

С:
ввод текста
Кому:
ввод текста

Вот пример того, что я пробовал - Примечание: это очень близко к тому, как я хочу, за исключением того, что когда ссылка нажимается второй раз, ничего не происходит

<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>

Если у кого-нибудь есть идеи, я был бы очень признателен
С уважением
~ Деклан

Answer 1

Использование jQuery и на основе вашего кода, который вы пытались просто показать / скрыть div, как насчет (не проверено):

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

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

пометка тега <a> идентификатором, который вы можете использовать выше?

Answer 2

Если вы хотите сделать это без использования 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 3

С jQuery это становится просто:

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

и

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

Нет никакого смысла манипулировать DOM в этом случае, если нет чего-то, что вы нам не говорите. Проще просто спрятать и показать как требуется.

Answer 4

С помощью 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

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