从同一文本链接交换div内容 [英] Swap div content from the same text link
问题描述
我无法使用传统的JavaScript解决问题，并且想知道是否存在使用jQuery的简单解决方案.我已经在网上搜索过，却找不到能完全满足我需求的东西.
I am having trouble resolving an issue using traditional JavaScript and was wondering if there is an easy solution using jQuery. I've searched the web and haven't been able to find anything that does exactly what i want to do.
所以..这就是我想要实现的:
我的内容有2个div，第一个显示，第二个隐藏.
在这些div的下方和外部，我有一个单独的文本链接，当第一次单击该链接时，它将与第二个div交换第一个div上的内容.再次单击时，我希望它切换回第一格，依此类推.每次我单击文本链接时，它应在每个onClick的2个格之间切换.
So.. this is what i want to achieve:
I have 2 div's with content, first one is displayed, second is hidden.
Below and outside of these div's i have a single text link which when first clicked, will swap the content on the first div with the second div. When clicked a second time i want it to swap back to first div and so on.. It should toggle between the 2 div's on each onClick every time i click the text link.
为了给它更多的上下文，我的div包含一个带有2个标签和文本输入的表单.在第一个div中，标签说:To:and From:在第二个div中，将顺序简单地翻转为说From :，然后是To:
在输入下方，我有一个文本链接，允许用户切换顺序到发件人:和发件人:
To put a bit more context to it, my div's contain a form with 2 labels and text inputs. In the first div the labels say To: and From: In the second div, the order is simply flipped to say From: and then To:
Below the inputs i have a text link that will allow the user to switch the order around to From: and To:
收件人:
文字输入
发件人:
文字输入
-文字链接-
To:
text input
From:
text input
- Text link -
当单击文本链接时，我希望将内容替换为:
When the text link is clicked i want the content replaced with this:
发件人:
文字输入
收件人:
文字输入
From:
text input
To:
text input
这里是我尝试过的示例-注意:这与我想要的非常接近，除了第二次单击链接时没有任何反应
<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>
如果有人有任何想法，我将非常感激
亲切的问候
〜declan
If anyone has any ideas, i would be very greatful
kind regards
~declan
推荐答案
如果您不想使用JQuery来做到这一点:
If you want to do it without using 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内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
