Javascript Boostrap popover不适用于html注入
我正在尝试创建从“dictionary”数组生成的动态弹出窗口,该数组将HTML注入页面上的现有文本中。该代码最初用于工具提示,效果很好,但现在我正在尝试转换为弹出窗口。然而html并没有注入,我被它卡住了。目的是点击一个单词并弹出定义等。我在同一页上也有一个功能正常的标准popover。我在控制台中没有收到任何错误:(Javascript Boostrap popover不适用于html注入,javascript,jquery,html,bootstrap-4,Javascript,Jquery,Html,Bootstrap 4,我正在尝试创建从“dictionary”数组生成的动态弹出窗口,该数组将HTML注入页面上的现有文本中。该代码最初用于工具提示,效果很好,但现在我正在尝试转换为弹出窗口。然而html并没有注入,我被它卡住了。目的是点击一个单词并弹出定义等。我在同一页上也有一个功能正常的标准popover。我在控制台中没有收到任何错误:( //script.js $(函数(){ var$words=[ { 字:“ね", 假名:“, 罗马书:“ne”, 定义:“n postposition表示强调、同意、请求确认
//script.js
$(函数(){
var$words=[
{
字:“ね",
假名:“,
罗马书:“ne”,
定义:“n postposition
表示强调、同意、请求确认等,是这样吗,嘿,来吧,听着,不是”,
注:“”
},
{
字:“動画",
假名:どうが",
罗马书:“杜加”,
定义:“视频、电影、动态图片、动画、动画、介于两者之间(动画)”,
注:“”
},
{
字:“今日",
假名:きょう",
romaji:“kyou”,
定义:“形容词今天,今天,这些天,最近,现在”,
注:“”
},
{
字:“毎日",
假名:まいにち",
romaji:“mainici”,
定义:“每天”,
注:“”
},
{
字:“も",
假名:“,
罗马书:“莫”,
定义:“形容词今天,今天,这些天,最近,现在”,
注:“te表格”
},
{
字:“頑張りましょう",
假名:がんばりましょう",
罗马书:“甘巴里马修”,
定义:“动词坚持,坚持,坚持,坚持,坚持,坚持,坚持,尽力”,
注:“让我们做”
},
];
$('.define')。定义({
词汇:$words
});
});//end$(函数()
$(文档).ready(函数(){
$('[data toggle=“popover”]')。popover();
});
/*===================js/jquery.define.js============================*/
var-html;
$.fn.definitions=函数(单词){
//$.fn jQuery.prototype的别名使用您自己的函数扩展jQuery
//log(“words:,words);//返回words数组
var计数=0;
//迭代jQuery对象,为每个匹配的元素执行一个函数。
返回此值。每个(函数(){
var_结果=[];
var _term=words[“term”];//console.log(_term);//返回单个数组中的每个定义/词对对象
var _this=$(this);//console.log(_this);
如果(_term.length>1){
$。每个(_术语,函数(){
对于(让输入_术语){
//仅对返回值的对象的所有属性进行迭代。
var val=_term[key];//console.log(val);//分别返回每个dict def/单词对对象
_结果:推(
_html(函数(索引,htmlContent){
如果(
_这个
.text()
.toUpperCase()
.indexOf(val[“word”].toUpperCase())>=0
) {
//log(html);
返回(html=define\u replace(
val[“单词”],
val[“定义”],
val[“假名”],
瓦尔[“罗马书”],
val[“注释”],
htmlContent,
钥匙
));//html注入
}
})
);
}//以…结尾
});
$(“#日语”).html(html);//已从.text()更改为
}否则{
_结果:推(
_html(函数(索引,htmlContent){
如果(
_这个
.text()
.toUpperCase()
.indexOf(_term[“word”].toUpperCase())>=0
) {
返回(html=define\u replace(
_术语[“单词”],
_术语[“定义”],
_术语[“假名”],
_术语[“罗马书”],
htmlContent
));
}
})
);
}
});//结束返回此。每个(函数()
};//end$.fn.definitions
//在html中找到单词之前和之后注入类
var define_replace=函数(单词、定义、kan、rom、注释、html、键){
//log(参数);
返回html.replace(
“在bootstrap.js之前包含popper.min.js
,或者使用bootstrap.bundle.min.js
和在任何地方启用弹出窗口
$(function () {
$('[data-toggle="popover"]').popover()
})
要在Bootstrap的弹出窗口中使用HTML,必须启用HTML内容,如文档中所述:Thank.HTML已启用,如script.js中的replace()HTML注入部分所示