jQuery 替换 Div 内容 onclick
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25735512/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Replace Div Content onclick
提问by Junaid Khawaja
I know nothing about jQuery but want to achieve something really important.
我对 jQuery 一无所知，但想要实现一些非常重要的东西。
I want to have a button/link that will replace the div content and if I press that button again so it will put the original content back in position.
我想要一个按钮/链接来替换 div 内容，如果我再次按下该按钮，它会将原始内容放回原位。
回答by BernardoLima
Here's an approach:
HTML:
这是一种方法：
HTML：
<div id="1">
My Content 1
</div>
<div id="2" style="display:none;">
My Dynamic Content
</div>
<button id="btnClick">Click me!</button>
jQuery:
jQuery：
$('#btnClick').on('click',function(){
if($('#1').css('display')!='none'){
$('#2').html('Here is my dynamic content').show().siblings('div').hide();
}else if($('#2').css('display')!='none'){
$('#1').show().siblings('div').hide();
}
});
JsFiddle:
http://jsfiddle.net/ha6qp7w4/
http://jsfiddle.net/ha6qp7w4/4<--- Commented
JsFiddle：
http : //jsfiddle.net/ha6qp7w4/
http://jsfiddle.net/ha6qp7w4/4<--- 评论
回答by HTTP
A simple addClass and removeClass will do the trick on what you need..
一个简单的 addClass 和 removeClass 可以满足您的需求。
$('#change').on('click', function() {
$('div').each(function() {
if($(this).hasClass('active')) {
$(this).removeClass('active');
} else {
$(this).addClass('active');
}
});
});
});
Seee fiddle
看小提琴
I recommend you to learn jquery first before using.
我建议你在使用之前先学习jquery。
回答by cssyphus
EDIT: This answer was submitted before the OP's jsFiddle example was posted in question. See second answer for response to that jsFiddle.
编辑：此答案是在 OP 的 jsFiddle 示例发布之前提交的。有关对该 jsFiddle 的响应，请参阅第二个答案。
Here is an example of how it could work:
这是它如何工作的一个例子：
HTML:
HTML：
<div id="someDiv">
Once upon a midnight dreary
<br>While I pondered weak and weary
<br>Over many a quaint and curious
<br>Volume of forgotten lore.
</div>
Type new text here:<br>
<input type="text" id="replacementtext" />
<input type="button" id="mybutt" value="Swap" />
<input type="hidden" id="vault" />
javascript/jQuery:
javascript/jQuery：
//Declare persistent vars outside function
var savText, newText, myState = 0;
$('#mybutt').click(function(){
if (myState==0){
savText = $('#someDiv').html(); //save poem data from DIV
newText = $('#replacementtext').val(); //save data from input field
$('#replacementtext').val(''); //clear input field
$('#someDiv').html( newText ); //replace poem with insert field data
myState = 1; //remember swap has been done once
} else {
$('#someDiv').html(savText);
$('#replacementtext').val(newText); //replace contents
myState = 0;
}
});
回答by cssyphus
Working from your jsFiddle example:
从您的 jsFiddle 示例工作：
The jsFiddle was fine, but you were missing semi-colons at the end of the event.preventDefault() statements.
jsFiddle 很好，但是在 event.preventDefault() 语句的末尾缺少分号。
This works: Revised jsFiddle
这有效：修订的jsFiddle
jQuery(document).ready(function() {
jQuery(".rec1").click(function(event) {
event.preventDefault();
jQuery('#rec-box').html(jQuery(this).next().html());
});
jQuery(".rec2").click(function(event) {
event.preventDefault();
jQuery('#rec-box2').html(jQuery(this).next().html());
});
});
回答by cssyphus
A Third Answer
第三个答案
Sorry, maybe I have it correct thistime...
对不起，也许这次我说对了……
var savedBox1, savedBox2, state1=0, state2=0;
jQuery(document).ready(function() {
jQuery(".rec1").click(function() {
if (state1==0){
savedBox1 = jQuery('#rec-box').html();
jQuery('#rec-box').html(jQuery(this).next().html());
state1 = 1;
}else{
jQuery('#rec-box').html(savedBox1);
state1 = 0;
}
});
jQuery(".rec2").click(function() {
if (state1==0){
savedBox2 = jQuery('#rec-box2').html();
jQuery('#rec-box2').html(jQuery(this).next().html());
state2 = 1;
}else{
jQuery('#rec-box2').html(savedBox2);
state2 = 0;
}
});
});
回答by user7035449
Try This:
尝试这个：
I think that you want something like this.
我认为你想要这样的东西。
HTML:
HTML：
<div id="1">
My Content 1
</div>
<div id="2" style="display:none;">
My Dynamic Content
</div>
<button id="btnClick">Click me!</button>
jQuery:
jQuery：
$('#btnClick').on('click',function(){
if($('#1').css('display')!='none'){
$('#2').show().siblings('div').hide();
}else if($('#2').css('display')!='none'){
$('#1').show().siblings('div').hide();
}
});
JsFiddle:
http://jsfiddle.net/ha6qp7w4/1113/<--- see this I hope You want something like this.
JsFiddle：
http : //jsfiddle.net/ha6qp7w4/1113/<--- 看到这个我希望你想要这样的东西。
