.replaceWith() 为不同的链接元素替换 div 中的内容

Question

我正在尝试根据我单击的链接加载具有不同内容的 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');
    }); 
});

Answer 1

试试这样的：

使用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");
        }); 
    });

Answer 2

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

Answer 3

所以我想出了一个更聪明的方法来做到这一点！充分利用 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();
    });
  });
});