jQuery将HTML呈现为带有切换的纯文本(切换工作正常,但不能将HTML转换为文本)
下面是我当前的代码。它工作正常,但我需要.code类元素显示为纯文本,而不是呈现为HTML。jQuery将HTML呈现为带有切换的纯文本(切换工作正常,但不能将HTML转换为文本)
的jQuery:
$(document).ready(function() {
$('.code').hide();
$('.codeLink').toggle(
function() {
$(this).next('.code').fadeIn();
$(this).addClass('close');
},
function() {
$(this).next('.code').fadeOut();
$(this).removeClass('close');
}
); // end toggle
});
HTML:
<a class="codeLink" style="margin-bottom: 10px; display: block;" href="#">Get The Code</a>
<div class="code"><a class="benefitsQandA" href="#">Get an Instant Quote & Apply</a></div>
的.CODE类应该显示在屏幕完全一样对这一部分(在未呈现为HTML换句话说刚作为文本):
<a class="benefitsQandA" href="#">Get an Instant Quote & Apply</a>
试试这个:
$(".code").text($(".code").html());
当然
,如果你正在做的,要多个div,你将需要使用。每个:
$(".code").each(function(){
$(this).text($(this).html());
});
使用$(".code").text($(".code").html())
这是第一次尝试,但在切换并重新点击关闭后,代码转到字符编码,如:& lt; a class =“benefitsQandA”href =“#”& gt;获得即时报价& amp; amp ;应用& lt;/a & gt; – OldWest
您应该使用切换事件之外的代码段。 –
你似乎在寻找某种CSS技巧来逃避HTML字符,而AFAIK没有一个。你需要用转义的HTML代替HTML,而你的其他代码只需要以某种方式来解释。 – Blazemonger
正确的方法来处理这是为了逃避你不想让浏览器渲染的代码,像这样:
<a class="codeLink" style="margin-bottom: 10px; display: block;" href="#">Get The Code</a>
<div class="code"><a class="benefitsQandA" href="#">Get an Instant Quote &amp; Apply</a></div>
如果你不这样做,那么你不能保证从浏览器得到正确的输出,因为JQuery的.html()标记是.innerHTML的封装(见http://api.jquery.com/html/),它并不总是返回你使用的完全相同的标记。
你可以看看像http://accessify.com/tools-and-wizards/developer-tools/quick-escape/这样的工具来为你逃跑。
你能不能从服务器做到这一点?
当用户点击切换按钮时,将html传递给服务器,使用php替换<和><
和>
的字符,并将html返回到页面。
除非你正在处理大量的数据,这应该不需要很长时间来处理。这样你就可以完全得到原始标记的100%。
它只是HTML渲染的问题吗?我不完全明白切换是如何涉及的。 – pimvdb
最好在散列(“#”)上使用“null javascript”href,如下所示:href =“javascript://” –
不涉及切换,但它是更广泛范围的一部分, 。 – OldWest