threejs 地图项目中,需要插入弹窗div,因为地图需要下钻所以会多次初始化,但是每次初始化后div中都会重复插入div,为了避免重复插入,需要在插入前判断是否存在,如果存在则移除再重现插入。
为了确保每次初始化时都只有一个tooltip
元素,你可以首先检查document.body
中是否已经存在一个tooltip
元素,如果存在则销毁它。然后再进行初始化。以下是如何实现这一逻辑的代码:
const getPop = () => {
// 查找已存在的tooltip元素
let existingTooltip = document.querySelector('.my-tooltip');
// 如果存在,则销毁它
if (existingTooltip) {
document.body.removeChild(existingTooltip);
}
// 创建新的tooltip元素
tooltip = document.createElement('div');
tooltip.className = 'my-tooltip'; // 添加一个class以便稍后查找它
// ... 其他tooltip属性和样式设置 ...
document.body.appendChild(tooltip); // 将tooltip添加到body
// ... 其他的代码 ...
}
注意,为了能够准确地查找到tooltip元素,我给它添加了一个class属性(名为my-tooltip
)。你可以根据需要更改这个名称。
通过上述代码,你可以确保每次初始化时,tooltip
元素都是新的,并且之前的tooltip
(如果存在)已经被销毁。