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

Question

我正在尝试根据我点击的链接加载具有不同内容的 div...

虽然当我点击它时它似乎适用于第一个链接，但点击其他链接只会将内容替换为 'encodeMe' 的相同内容，但我已经为 'htmlize-me' 指定了我想要替换的不同内容'

第一次运行时我没有使用 jQuery 的 .bind() 函数。我只是简单地使用了 .click() ，结果都是一样的。通过查看 jQuery API，我认为使用 .bind() 函数会将其中的每个函数绑定(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");
        }); 
    });