Question

我无法使用传统的JavaScript解决问题，并且想知道是否有使用jQuery的简单解决方案。我在网上搜索过，但却找不到任何我想做的事情。

所以..这就是我想要实现的目标：
我有2个div的内容，第一个显示，第二个隐藏。在这些div的下方和外部我有一个文本链接，当第一次单击时，将第一个div上的内容与第二个div交换。当我第二次点击时，我希望它交换回第一个div等等。每次点击文本链接时，它应该在每个onClick上的2个div之间切换。

为了给它添加更多的上下文，我的div包含一个带有2个标签和文本输入的表单。在第一个div中，标签显示To：和From：在第二个div中，顺序只是翻转为：From：然后To：
在输入下方我有一个文本链接，允许用户切换订购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();
});

使用您可以在上面使用的ID标记<a>代码？

Answer 2

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

Answer 3

使用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 4

使用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 5

如果你想在不使用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>

从同一文本链接交换div内容

5 个答案: