javascript - 如何在javascript中在彼此下方显示数据

Question

大家好，请指导我如何做到这一点，我希望我的结果出现在彼此下方，请引用下面的代码:

function displayData(e)
{
var html = '';
var html2 = '';
$searchcontainer = $('#searchcontainer');
var mapDiv = document.getElementById('mapContainer'), i = 0,
     dataIndex, tooltipDiv, key
mapMarkers = $(mapDiv).find('.e-mapMarker'), index = 0;
for (i = 0; i < mapMarkers.length; i++)
{

    if (e.target.parentNode.parentNode == mapMarkers[i])
    {
        index = i;

    }
}

html += '<div id="infocontainer">';
html += '<div class="p-image"><img src="src/images/retrofit.png"/></div>';
html += '<div class="popupdetail">';
html += '<div class="p-name"> Site Name: ' + flsSites[index].site_name + '</div>';
html += '<div class="p-name"> Site Status: ' + flsSites[index].status + '</div>';
html += '<div class="p-name"> Country: ' + flsSites[index].country_name + '</div>';
html += '</div>';
html += '</div>';
$searchcontainer = $('#searchcontainer');
if (!$(this).data('rightCont')) {
        $(this).data('rightCont', $('<div class="rightcontainer">' +
            '<img id="productimage" src="src/images/retrofit.png" onClick="DisplayProfileCard()"/>' +
            '<div id="imagedetail">' +
            '<span class="details">Product Type' + Sites[index].serial_number + '</span>' +
            '<span class="details">Version / Size <img class="row_one_icon lightbulb_icon" id="lightbulb" src="src/images/lightbulb1.png" onClick="LightBulb()" /><img id="convert" class="row_one_icon arrow_icon" src="src/images/arrow_Off.png" onClick="Conversion()"/><img id="lightning" class="row_one_icon" src="src/images/lightningOff.png" onClick="Lightning()"/><img id="bullseye" class="row_one_icon bullseye" src="src/images/bullseye_off.png" onClick="BullsEye()"/></span>' +
            '<span class="details">Estimated annual Spend <img class="row_one_icon ribbon" src="src/images/ribbon1.png"/><img class="row_one_icon map" src="src/images/map1.png"/><img class="row_one_icon paper_stack" id="paper" src="src/images/paper_stack_Off.png" onclick="PaperStack()"/><img class="row_one_icon chain" id="chain" src="src/images/chain_Off.png" onClick="ChainLink()"/></span>' +
            '<span class="details">Site name / manufacturer</span>' +
            '<span class="details">Selling Sales Eng</span>' +
            '</div></div>').appendTo($searchcontainer));
    }

    $searchcontainer.find('.rightcontainer').removeClass('background');
    $(this).data('rightCont').addClass('background');

现在我的代码是这样工作的，如果我将鼠标悬停在 map 中的标记上，它会将结果显示到我的 searchcontainer div，但如果我将鼠标悬停在另一个项目上，它将显示另一个结果但是它会覆盖之前的结果而不是在下面显示

提前非常感谢

Answer 1

每次执行时，对 $(this).data 的调用都会覆盖 rightCont 的内容。了解更多 the JQuery API. .appendTo(...) 调用应该足够了。

话虽如此，使用字符串操作来创建 HTML 代码在风格上是很糟糕的。看看 Vue.js、Handlebars、Angular、React 或任何其他前端 MVC 框架 - 它们是设计用于轻松将 Javascript 数据绑定(bind)到 HTML 的工具，而不是使用字符串操作手动插入数据。