Question

我在html中有两个div，单击一个按钮应该用当前div替换当前div而不是当前div

＆＃13;

.team-intro {
margin-top:38%;
height:250px;
background-color:#7BD2FF;
/*background-image:url('images/backgrounds/download.jpg');*/
background-size:contain;

font-weight: bold;
font-family: Roboto;
font-size: 1.5em;
border-top: 1px solid #cdcdcd;
border-bottom: 1px solid #cdcdcd;

}

.team-intro p{
margin-left:27%;
margin-top: 3%;
font-size: 1.5em;
color:#ffffff;
font-weight:bolder;


}
.team-btn{
/*border:2px solid #3aa3e3;*/
border:2px solid #ffffff;
border-radius: 0.25rem;
padding: 14px 32px 16px;
position: absolute;
/*color:#3aa3e3;*/
color:#ffffff;
margin-top: 1%;
background-color:#3aa3e3;
cursor: pointer;
display: inline-block;
left:42%;
font-weight: bold;
font-family: Roboto;
font-size: 1.22em;

}
.team-btn:hover{

background-color:#7BD2FF;
color: #fff;
font-weight: bold;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
       <div class="team-intro">
<p>XXXXX is a Free to use, Invite your team and get started today</p> </div>
<div class="team-btn">Invite Now</div>



<div calss="team-invite" style="display:none;">
<p>Invie by Email</p> 
<input type='email' id="inviteEmail"  required placeholder='Email' size="70"><br>
</div>

<!-- begin snippet: js hide: false console: true babel: false -->

＆＃13;

我想用div team-intro替换div class team-invite，但在team-intro p的确切位置会显示电子邮件地址文本框

Answer 1

class div上team-invite的拼写错误。更改拼写，然后在按钮上单击

调用以下内容

$('.team-intro').replaceWith($(".team-invite").clone().show())

Answer 2

如果您使用的是jQuery，那么.html()函数呢？

当您在选择器上调用.html(TEXT)时，它会在选择器内的参数中插入传递的TEXT。当您只需在选择器上调用.html()时，就会获得其内在内容。

知道这一点，你可以将两者结合起来：

Documentation

$(function() {
    $("#btnClick").click(function(e) {
        e.preventDefault();

        $('.1').html($('#myHiddenDiv').html());
    });
});

<div class="1">
    My Content 1
</div>

<div id="myHiddenDiv" class="2" style="display:none;">
    My Dynamic Content
</div>

<button id="btnClick">Click me!</button>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 3

将第二个div的显示设置为block以显示它。

$(".2").css("display", "block");

$(function() {

      $("#btnClick").click(function(e) {
        e.preventDefault();

        $('.1').replaceWith('<div class="2"></div>');
        $(".2").css("display", "block");
      });

    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
       <div class="1">
          My Content 1
        </div>

        <div class="2" style="display:none;">
        My Dynamic Content
        </div>
        <button id="btnClick">Click me!</button>

Answer 4

这对你有用。它只使用jquery的hide和show函数： -

$(function() {

      $("#btnClick").click(function(e) {
        e.preventDefault();

        $('.1').hide();
        $('.2').show();
      });

    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
       <div class="1">
          My Content 1
        </div>

        <div class="2" style="display:none;">
        My Dynamic Content
        </div>
        <button id="btnClick">Click me!</button>

Answer 5

试试这个：

＆＃13;

$(function() {

      $("#btnClick").click(function(e) {
        e.preventDefault();

        $("div.1").replaceWith('<div class="2">My Dynamic Content</div>');
      });

    });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="1">
          My Content 1
        </div>

        <button id="btnClick">Click me!</button>

＆＃13;

如何在js或jquery中将div2替换为与div1完全相同位置的div1

5 个答案: