我使用prism.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（），瓦尔（）或text（）来定位pre标签，code或script标签，它也不起作用。
任何帮助将不胜感激。
编辑：感谢Swati回答它的作品.如果我想做相反的，因为相同的代码，它的作品，太.这里是我的测试：
$(".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>
1条答案
按热度按时间rqmkfv5c1#
您可以使用
nextAll('.code:first')和next('.result')获取代码块和结果div，并根据条件显示或隐藏代码或结果div。演示代码：
另一种方式：你可以在你的结果div中有相同的html，每当你点击按钮时，只需切换div。