我正在使用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上定义的类有影响吗?
发布于 2018-06-02 04:52:28
html中的空格(在徽章文本之前)被渲染(并缩小为一个空格)-您可以通过添加空格在JS中实现相同的效果,即更改
'<span class="badge badge-secondary">' + opt.text + '</span>'
至
'<span class="badge badge-secondary"> ' + opt.text + '</span>'
发布于 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
https://stackoverflow.com/questions/50650789
复制相似问题