我使用prm.js来显示一段代码.我希望能够显示此代码的视觉渲染.所以我创建了一个按钮，从代码转到渲染，就在div下面，空的插入代码，这样它就可以直接解释并显示可视化的渲染.然后是我的代码块.大概是这样的:
<button class="flip">See the code</button>
<div class="result"></div>
<div class="code">
<pre class="language-markup"><code class="language-markup"><script class="script" type="text/plain">
....here is my html code...
</script></code></pre>
</div>
因为我有很多这样的代码块，所以我想使用Each和Click函数，如下所示:
$('.flip').each(function(){
$(this).on('click',function(){
var code = $(this).next('.code').html();//get the html code from the html block
var result = $(this).next('.result').text(code);// inject it in the result block
$(this).next('.code,.result').toggleClass('hide');// toggle to show code or result..
})
})
但它什么也做不了.即使我使用html()、val()或text()针对前标记、代码或脚本标记，它也不起作用.
如有任何帮助，我们将不胜感激.
EDIT:多亏了斯瓦蒂的回答，它起作用了.如果我想做相反的事情，因为相同的代码，它也可以工作.这是我的测试:
$(".code").hide();
$('.flip').each(function(){
var code_block = $(this).nextAll('.code:first');
var preview_div = $(this).next('.result');
preview_div.html(code_block.find("code.language-markup").text()); //add your html in result div...
})
$(".flip").click(function() {
var code_block = $(this).nextAll('.code:first');
var preview_div = $(this).next('.result');
//run or show codes..block
if ($(this).text().trim() == "See the code") {
$(this).text('Run Code')
// preview_div.html(code_block.find("code.language-markup").text()); //add your html in result div...
preview_div.show();
code_block.hide();
} else {
$(this).text('See the code')
code_block.show();
preview_div.hide();
}
})<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="
https://cdn.jsdelivr.net/npm/prismjs@1.29.0/prism.min.js
"></script>
<link href="
https://cdn.jsdelivr.net/npm/prismjs@1.29.0/themes/prism.min.css
" rel="stylesheet">
</head>
<body>
<button class="flip">Run Code</button>
<div class="result"></div>
<div class="code">
<pre class="language-markup">
<code class="language-markup">
<script class="script" type="text/plain">
<img src="https://i.pinimg.com/originals/1f/65/30/1f65303066ef5e14cad11da3c6eeef0d.jpg" width="50px" height="50px">
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</script>
</code>
</pre>
</div>
<button class="flip">Run Code</button>
<div class="result">
</div>
<div class="code">
<pre class="language-markup">
<code class="language-markup">
<script class="script" type="text/plain">
<p>XYZ..something <input type="text"/></p>
</script>
</code>
</pre>
</div>