如何显示显示单词更正的弹出对话框

Question

我正在创建一个单词更正扩展，它将错误的单词包装在span元素中。当用户将鼠标悬停在单词上时，将出现一个可能进行更正的下拉菜单。这是我的代码，它不能正常工作，如何在一行中对齐每一个，它们当前显示在一起。

还有更好的方法吗？

$(".error").each(function(index, element) {
$(this).css('cursor', 'pointer');
$(this).mouseover(function() {
if ($(this).has('.popup-base').length > 0) {
return;
}
var popup = document.createElement('div');
popup.className = 'popup-base';
let correctionslist = element.getAttribute('suggestions').split(',');
for (correct of correctionslist) {
popup.innerHTML += '<span class="listitem">' + correct + ' </span>';
}
$(this).append(popup);
});
});

.error {
background-color: yellow;
position: relative;
display: inline-block;
}
.popup-base {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
padding: 12px 16px;
z-index: 1;
}
.error:hover .popup-base {
display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div contenteditable><span data-offset-key="6j93r-0-0"><span data-text="true">Por favor, leia as <span class="error" suggestions="reges,regra,regrãs,regres,regras,regrá,regrã,regôs,regre,regas,regro,regos" style="cursor: pointer;">regrs</span>. Meu <span class="error"
suggestions="nom." style="cursor: pointer;">nom</span> é <span class="error" suggestions="Nícolas,Nicola,Ricolas,Picolas,Ni colas,Nicol as,Nicolaus,Unicolas,Nicolau" style="cursor: pointer;">Nicolas</span>.&nbsp;Brasil é o <span class="error"
suggestions="unto,quento,quinto,quanto,queto,sunto,quito,quoto,cunto,munto,punto,junto,quinoto,quinteto,quiranto" style="cursor: pointer;">qunto</span> <span class="error" suggestions="mair,amor,moar,maro,mar,mor,maore,maori,maior,mafor,major,mora,maar"
style="cursor: pointer;">maor</span> pais do mundo.</span>
</span>
</div>

Answer 1

您的listitem元素正在使用<span>，这是一个内联元素，以及为什么单词显示在彼此旁边而不是顶部。您可以使用不同的元素或向listitem元素添加类来生成display:block。在本例中，我选择为listitem类添加CSS。为了好玩，我还添加了悬停效果。

$(".error").each(function(index, element) {
$(this).css('cursor', 'pointer');
$(this).mouseover(function() {
if ($(this).has('.popup-base').length > 0) {
return;
}
var popup = document.createElement('div');
popup.className = 'popup-base';
let correctionslist = element.getAttribute('suggestions').split(',');
for (correct of correctionslist) {
popup.innerHTML += '<span class="listitem">' + correct + ' </span>';
}
$(this).append(popup);
});
});

.error {
background-color: yellow;
position: relative;
display: inline-block;
}
.popup-base {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
padding: 12px 16px;
z-index: 1;
}
.error:hover .popup-base {
display: block;
}
.listitem {
display:block;
margin:7px 0;
}
.listitem:hover {
background-color:blue;
color:white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div contenteditable><span data-offset-key="6j93r-0-0"><span data-text="true">Por favor, leia as <span class="error" suggestions="reges,regra,regrãs,regres,regras,regrá,regrã,regôs,regre,regas,regro,regos" style="cursor: pointer;">regrs</span>. Meu <span class="error"
suggestions="nom." style="cursor: pointer;">nom</span> é <span class="error" suggestions="Nícolas,Nicola,Ricolas,Picolas,Ni colas,Nicol as,Nicolaus,Unicolas,Nicolau" style="cursor: pointer;">Nicolas</span>.&nbsp;Brasil é o <span class="error"
suggestions="unto,quento,quinto,quanto,queto,sunto,quito,quoto,cunto,munto,punto,junto,quinoto,quinteto,quiranto" style="cursor: pointer;">qunto</span> <span class="error" suggestions="mair,amor,moar,maro,mar,mor,maore,maori,maior,mafor,major,mora,maar"
style="cursor: pointer;">maor</span> pais do mundo.</span>
</span>
</div>