[英]how to replace div2 with other div1 at exact same position of div1 in js or jquery
I have two div in html, clicking on a button should replace a current div with other div but at the exact same place of current div 我在html中有两个div,单击按钮应将当前div替换为其他div,但应与当前div完全相同
.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; }
<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 -->
I want to replace div class team-intro
with div team-invite
but in exact position of team-intro p
where a Email address text box will appear 我想用div team-invite
代替div class team-intro
,但要在team-intro p
确切位置显示电子邮件地址文本框
Your code isn't moving the DIV with class="2"
, it's creating a new DIV with that class. 您的代码没有移动class="2"
的DIV,而是使用class="2"
创建了新的 DIV。 But it doesn't contain anything. 但是它不包含任何东西。
If you want to move the existing DIV, you need to use a selector, not HTML. 如果要移动现有的DIV,则需要使用选择器,而不是HTML。 But when you replace it, it still has display:none;
但是当您更换它时,它仍然display:none;
style, so you won't see it unless you also call .show()
样式,因此除非您也调用.show()
,否则您将看不到它
$(function() { $("#btnClick").click(function(e) { e.preventDefault(); $('.1').replaceWith($('.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>
The spelling of class
is wrong on the team-invite
div. 在team-invite
div上, class
的拼写错误。 Change the spelling and then call the following on button click 更改拼写,然后在按钮单击上调用以下内容
$('.team-intro').replaceWith($(".team-invite").clone().show())
If you are using jQuery, what about the .html()
function? 如果您使用的是jQuery,那么.html()
函数呢?
When you call .html(TEXT)
on a selector, it inserts the passed TEXT in argument inside the selector. 在选择器上调用.html(TEXT)
时,它将在选择器内部的参数中插入传递的TEXT。 When you simply call .html()
on a selector, you get its inner content. 当您在选择器上简单地调用.html()
时,您将获得其内部内容。
Knowing that, you can combine both: 知道这一点,您可以将以下两者结合起来:
$(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>
Set the display of the second div
as block
to show it. 将第二个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>
This will work for You. 这将为您工作。 It just uses hide and show functions of jquery:- 它只使用jquery的隐藏和显示功能:-
$(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>
Try this : 尝试这个 :
$(function() { $("#btnClick").click(function(e) { e.preventDefault(); $("div.1").replaceWith('<div class="2">My Dynamic Content</div>'); }); });
<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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.