为什么我会因为这个Javascript函数而失去边距
为什么我会因为这个Javascript函数而失去边距
提问于 2018-06-02 04:46:07
我正在使用Bootstrap4，我有一个多选和一个单独的div，显示当前选择的徽章系列。(因为如果使用移动设备，选择不会显示当前选择的内容，它只会显示选择了多少项)
<div class="form-control mb-2" id="fieldsCompleteness" name="fieldsCompleteness">
<span class="badge badge-secondary">
Acoustic
</span>
<span class="badge badge-secondary">
Album
</span>
<span class="badge badge-secondary">
Sort Album Artist
</span>
</div>当用户更改选择时，必须更新徽章，这是通过调用此Javascript函数来完成的。
function getSelectValues(select, readonlylist)
{
var result = '';
var options = select && select.options;
var opt;
for (var i=0, iLen=options.length; i<iLen; i++)
{
opt = options[i];
if (opt.selected)
{
result+='<span class="badge badge-secondary">' + opt.text + '</span>';
}
}
readonlylist.innerHTML =result;
return result;
}这是可行的，除了每个徽章之间的空白处消失。我不明白为什么，看起来我只是用完全相同的Html (一系列跨度)替换现有的Html。由于我误解了innerHTML的工作原理，它对外部div上定义的类有影响吗？
回答 2
Stack Overflow用户
发布于 2018-06-02 04:52:28
html中的空格(在徽章文本之前)被渲染(并缩小为一个空格)-您可以通过添加空格在JS中实现相同的效果，即更改
'<span class="badge badge-secondary">' + opt.text + '</span>'至
'<span class="badge badge-secondary"> ' + opt.text + '</span>'Stack Overflow用户
发布于 2018-06-02 05:17:30
//works as answered above
result+='<span class="badge badge-secondary"> ' + opt.text + '</span>';
//but it is better without spaces between the + + unless you are concatinating different data types
result+='<span class="badge badge-secondary"> '+opt.text+'</span>';
//or you could just create and re-use a new variable like ...
var x=' '; // or x=' '
//then use like...
somestring+=somewordVAR+x;
//so on so fourth页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50650789
复制相关文章
相似问题