我有一个加载模态窗口的 Jquery JS 脚本。在该模式窗口中有一个预代码标记,我通过 ajax 拉入脚本。我想使用Highlight.js来使代码更具可读性。
我现在已经设法让代码前标签中的代码正确突出显示。 但是当我关闭模态框并再次打开它时,代码不再突出显示,并且我的控制台显示此消息。
“之前突出显示的元素。要再次突出显示,请首先取消设置“dataset.highlighted”。”
如何“取消突出显示的数据集”?
这是我的代码。
$(document).on('click','#codebutton', function(){
var tTitle = $(this).attr('data-title')
var tLink = $(this).attr('data-href')
var tDesc = $(this).attr('data-desc')
$('#codewindow').modal({
transition: 'fade',
duration: 500,
onShow: function() {
$('#codewindow').modal({
transition: 'fade',
duration: 1000
})
},
onApprove: function(){
$('#codewindow').modal('destroy');
},
onHide: function(){
hljs.highlight.called = false;
},
}).modal('show');
$.ajax({
url : "BKND/Codes/"+tLink,
dataType: "text",
success : function (data) {
hljs.highlightAll($(".hg").html(data));
},
complete: function(data) {
$(".codeheader").html(tTitle)
$(".description p").html(tDesc)
}
});
});
尝试更新版本的代码:
$(document).on('click', '#codebutton', function () {
var tTitle = $(this).attr('data-title');
var tLink = $(this).attr('data-href');
var tDesc = $(this).attr('data-desc');
$('#codewindow').modal({
transition: 'fade',
duration: 500,
onShow: function () {
$('#codewindow').modal({
transition: 'fade',
duration: 1000
});
},
onApprove: function () {
$('#codewindow').modal('destroy');
},
onHide: function () {
// Clear the 'highlighted' dataset attribute on close
$('.hg').removeAttr('data-highlighted');
},
}).modal('show');
$.ajax({
url: "BKND/Codes/" + tLink,
dataType: "text",
success: function (data) {
// Set new content and clear any prior highlighting
$(".hg").html(data).removeAttr('data-highlighted');
// Highlight the new content
hljs.highlightAll();
},
complete: function () {
$(".codeheader").html(tTitle);
$(".description p").html(tDesc);
}
});
});