替换 div 内容 onclick答案

【问题标题】：Replace Div Content onclick替换 div 内容 onclick
【发布时间】：2021-06-23 00:52:51
【问题描述】：

我对 jQuery 一无所知，但想实现一些非常重要的目标。

我想要一个按钮/链接来替换 div 内容，如果我再次按下该按钮，它会将原始内容放回原位。

【问题讨论】：

请发布一些代码以及到目前为止您尝试了什么...
我不懂javascript，所以我没有编码。我在我的需要附近发现了一个 stackoverflow 问题。 stackoverflow.com/questions/14685224/…
我把它放在 JS fiddle 中并更改了一些代码，它正在工作，但如果我再次点击链接，我不知道如何将原始内容放回。
这是我的小提琴链接jsfiddle.net/junaidkhawaja/vmu0gtoL

【解决方案1】：

这是一种方法：

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：

$('#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

【讨论】：

谢谢。你的小提琴就在我的帮助下。你在 JS 中输入了“这是我的动态内容”，但我需要一个 HTML div，它会在点击时显示和替换……你能帮我调整一下你的小提琴吗……
是的，那是完美的。我看到你为此设置了 onload，我将如何在我的 Wordpress 网站中插入该代码。另一个愚蠢的问题..我不知道如何制作这样的4个代码..你能在那个小提琴中做到这一点..帮助将不胜感激..
jsfiddle.net/ha6qp7w4/4 这是注释的代码，我已经尽力说清楚了，如果您有任何问题告诉我，请注意您可以在任何元素上使用事件，例如，如果您将 btnClick 替换为一个 div ID，当它检测到对 div 的点击时，它也会起作用。
谢谢大师！在您的帮助下，我想出了解决方案。这就是我需要的。 jsfiddle.net/junaidkhawaja/ha6qp7w4/5
@JunaidKhawaja，看来你明白了：DD

【解决方案2】：

一个简单的 addClass 和 removeClass 就可以满足您的需要..

$('#change').on('click', function() { 
  $('div').each(function() { 
    if($(this).hasClass('active')) { 
        $(this).removeClass('active');
    } else { 
        $(this).addClass('active');
    }
});

});

见fiddle

我建议你在使用之前先学习jquery。

【讨论】：

【解决方案3】：

使用您的 jsFiddle 示例：

jsFiddle 很好，但是在 event.preventDefault() 语句的末尾缺少分号。

这可行：Revised 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()); 
    });
});

【讨论】：

不，我需要在 BernardoLima cmets 中定义的其他内容.. 见那边的 cmets.. 我需要更多帮助，但我认为他离线..

【解决方案4】：

编辑：这个答案是在 OP 的 jsFiddle 示例被发布之前提交的。请参阅第二个答案以响应该 jsFiddle。

这是一个如何工作的例子：

Working jsFiddle Demo

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:

//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;
    }
});

【讨论】：

【解决方案5】：

第三个答案

对不起，也许我有正确的这个时间......

jsFiddle Demo

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;
        }
    });
});

【讨论】：

【解决方案6】：

试试这个：

我认为你想要这样的东西。

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：

$('#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/

【讨论】：

【解决方案7】：

这里有一个完整的解决方案来实现这一点 -

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
function toggleText(){
    if ($("#txt-1").css("display") != "none") {
        $("#txt-1").css("display", "none");
        $("#txt-2").css("display", "block");
        $("#txt-3").css("display", "none");
    } else if ($("#txt-2").css("display") != "none") {
        $("#txt-1").css("display", "none");
        $("#txt-2").css("display", "none");
        $("#txt-3").css("display", "block");
    } else {
        $("#txt-1").css("display", "block");
        $("#txt-2").css("display", "none");
        $("#txt-3").css("display", "none");
    }
};
</script>
</head>
<body>

<button onclick="toggleText()">Toggle</button>

<p id="txt-1">Hello</p>
<p id="txt-2" style="display: none;">How are you?</p>
<p id="txt-3" style="display: none;">See you soon!</p>

</body>
</html>

【讨论】：