![](/img/trans.png)
[英]Using jQuery replaceWith to replace content of DIV only working first time
[英].replaceWith() to replace content in a div for different link elements
我正在嘗試根據點擊的鏈接加載具有不同內容的div ...
當我單擊它似乎對第一個鏈接有效時,單擊其他鏈接僅將具有相同內容的內容替換為“ encodeMe”,但我指定了要替換為“ htmlize-me”的其他內容
首先,我沒有使用jQuery的.bind()函數。 我只是使用.click(),但兩者的結果相同。 通過瀏覽jQuery API,我認為使用.bind()函數會將其中的每個函數綁定到該特定頁面元素,但似乎將其應用於我的所有鏈接。
我已經使用.hide和.show切換div達到了相同的效果,但是我想更加優雅地做到這一點,這是我嘗試的替代方法...
這是相關的html:
<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>
這是我觸發內容更改的腳本:
$('#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');
});
});
嘗試這樣的事情:
使用html()
代替replaceWith()
$('#encode-me').bind('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').bind('click' , function() {
$('div.the-content').html("Hi, I'm something different");
});
});
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');
});
因此,我想出了一種更聰明的方法! 利用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>
CSS
.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();
});
});
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.