Javascript .replaceWith()为不同的链接元素替换div中的内容
我正试图加载一个div与不同的内容的基础上,我点击的链接 当我单击第一个链接时,它似乎对第一个链接有效,但单击其他链接只会用“encodeMe”的相同内容替换内容,但我已经指定了要替换为“htmlize me”的不同内容 第一次运行时,我没有使用jQuery的.bind()函数。我只是简单地使用了.click(),两者的结果相同。通过查看jQueryAPI,我认为使用.bind()函数可以将其中的每个函数绑定到特定的页面元素,但它似乎可以将其应用到我的所有链接 我使用.hide和.show切换div也达到了同样的效果,但我想更优雅一些,这是我尝试的替代方法 以下是相关的html:Javascript .replaceWith()为不同的链接元素替换div中的内容,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我正试图加载一个div与不同的内容的基础上,我点击的链接 当我单击第一个链接时,它似乎对第一个链接有效,但单击其他链接只会用“encodeMe”的相同内容替换内容,但我已经指定了要替换为“htmlize me”的不同内容 第一次运行时,我没有使用jQuery的.bind()函数。我只是简单地使用了.click(),两者的结果相同。通过查看jQueryAPI,我认为使用.bind()函数可以将其中的每个函数绑定到特定的页面元素,但它似乎可以将其应用到我的所有链接 我使用.hide和.show切换d
<label for="list-root">App Hardening</label>
<input type="checkbox" id="list-root" />
<ol>
<li id="encode-me"><a class="show-popup" href="#">encodeMe()</a></li>
<li id="htmlize-me"><a class="show-popup" href="#">htmlizeMe()</a></li>
</ol>
<div class="overlay-bg">
<div class="overlay-content">
<div class="the-content"></div>
<br><button class="close-button">Close</button>
</div>
</div>
App加固
接近
下面是我用来触发内容更改的脚本:
$('#encode-me').bind('click' , function() {
$('div.the-content').replaceWith('<h3 style="color: #008ccc;"> function encodeMe( string ) </h3>' +
'Found in <p>[web root]/redacted/redacted.asp</p>');
});
});
$('#htmlize-me').bind('click' , function() {
$('div.the-content').replaceWith('Hi, Im something different');
});
});
$('encodeme').bind('click',function(){
$('div.the-content')。替换为('function encodeMe(string)'+
'在[web root]/redacted/redacted.asp中找到');
});
});
$('#htmlize me').bind('click',function(){
$('div.the-content')。替换为('Hi,Im与众不同');
});
});
尝试以下方法:
使用而不是replaceWith()
$('encodeme').bind('click',function(){
$('div.the-content').html('function encodeMe(string)'+
'在[web root]/redacted/redacted.asp中找到');
});
});
$('#htmlize me').bind('click',function(){
$('div.the-content').html(“嗨,我与众不同”);
});
});
replaceWith
完全按照它的发音执行,它将div替换为h3,因此当您单击第二个链接时,没有div
改为尝试设置innerHTML
$('#encode-me').on('click' , function() {
$('div.the-content').html('<h3 style="color: #008ccc;"> function encodeMe( string ) </h3>Found in <p>[web root]/redacted/redacted.asp</p>');
});
$('#htmlize-me').on('click' , function() {
$('div.the-content').html('Hi, I\'m something different');
});
$(“#编码我”)。在('click',function()上{
$('div.the-content').html('function encodeMe(string)位于[web root]/redact/redact.asp');
});
$('#htmlize me')。在('click',function()上{
$('div.the-content').html('Hi,我是与众不同的');
});
所以我想出了一个更聪明的方法!利用DOM—设置嵌套列表结构,并使用列表中的父元素和子元素上的.find()更改内容
标记
<span style="font-size:1.4em">Type
<ul class="row">
<li><a href="#" class="show-popup">Blah</a>
<div class="overlay-content">
<p><a href="#" class="close"></a></p>
<p class="changeText">Blah</p>
</div>
</li>
<li><a href="#" class="show-popup">Blah2</a>
<div class="overlay-content">
<p><a href="#" class="close"></a></p>
<p class="changeText">Blah2</p>
</div>
</li>
</ul>
</span><br>
<!-- OVERLAYS -->
<div class="overlay"></div>
脚本
$(document).ready(function(){
$('.show-popup').click(function() {
var ce = this;
$('.overlay').show('slow', function() {
$(ce).parent().find('.overlay-content').fadeIn('slow');
});
});
// show popup when you click on the link
$('.show-popup').click(function(event){
event.preventDefault(); // disable normal link function so that it doesn't refresh the page
var docHeight = $(document).height(); //grab the height of the page
var scrollTop = $(window).scrollTop(); //grab the px value from the top of the page to where you're scrolling
$('.overlay').show().css({'height' : docHeight}); //display your popup and set height to the page height
$('.overlay-content').css({'top': scrollTop+100+'px'}); //set the content 100px from the window top
});
/*
// hides the popup if user clicks anywhere outside the container
$('.overlay').click(function(){
$('.overlay').hide();
})
*/
// prevents the overlay from closing if user clicks inside the popup overlay
$('.overlay-content').click(function(){
return false;
});
$('.close').click(function() {
$('.overlay-content').hide('slow', function() {
$('.overlay').fadeOut();
});
});
});
所以我注意到了一些事情——即使我这样做了(与上面的答案类似),单击“encodeMe”将div的内部html替换为“Hi-Im something different”,这是对.html的调用列表中的最后一个——这让我觉得最后一次调用.html
html()总是会覆盖一些内容
将始终覆盖DIV中的任何内容,如果您只想添加内容,您可以使用append()
来代替。hmmm,这很有意义-实际上这让我想到了一种解决方法。它可能会变得丑陋,但值得一试=P@BrittanyAlkire-有许多jQuery方法可以插入内容,因此您通常不必“黑客”任何东西。这里有append、appendTo、prepend、prependTo、insertBefore、before、insertAfter、after、html++,所以只要在jQuery网站上读一下它们(它们都做得很像),你可能会发现一些适合的东西,如果不适合,你可以随时询问堆栈溢出。我试图向上投票,但显然我需要15个代表点:(耶,没关系,它成功了=我得到了更多的分数:)好了,仔细阅读这个问题,你可能会发现它很有用:别忘了接受你对这个问题的回答,干杯!
.close {
border-radius: 10px;
background-image: url(../img/close-overlay.png);
position: absolute;
right:-10px;
top:-15px;
z-index:1002;
height: 35px;
width: 35px;
}
.overlay {
position:absolute;
top:0;
left:0;
z-index:10;
height:100%;
width:100%;
background:#000;
filter:alpha(opacity=60);
-moz-opacity:.60;
opacity:.60;
display:none;
}
.overlay-content {
position:fixed!important;
width: 60%;
height: 80%;
top: 50%;
left: 50%;
background-color: #f5f5f5;
display:none;
z-index:1002;
padding: 10px;
margin: 0 0 0 -20%;
cursor: default;
border-radius: 4px;
box-shadow: 0 0 5px rgba(0,0,0,0.9);
}
$(document).ready(function(){
$('.show-popup').click(function() {
var ce = this;
$('.overlay').show('slow', function() {
$(ce).parent().find('.overlay-content').fadeIn('slow');
});
});
// show popup when you click on the link
$('.show-popup').click(function(event){
event.preventDefault(); // disable normal link function so that it doesn't refresh the page
var docHeight = $(document).height(); //grab the height of the page
var scrollTop = $(window).scrollTop(); //grab the px value from the top of the page to where you're scrolling
$('.overlay').show().css({'height' : docHeight}); //display your popup and set height to the page height
$('.overlay-content').css({'top': scrollTop+100+'px'}); //set the content 100px from the window top
});
/*
// hides the popup if user clicks anywhere outside the container
$('.overlay').click(function(){
$('.overlay').hide();
})
*/
// prevents the overlay from closing if user clicks inside the popup overlay
$('.overlay-content').click(function(){
return false;
});
$('.close').click(function() {
$('.overlay-content').hide('slow', function() {
$('.overlay').fadeOut();
});
});
});