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');

现在我的代码就像这样，如果我将鼠标悬停在地图上的标记上，它会将结果显示给我的searchcontainer div，但是如果我悬停另一个项目，它会显示另一个结果但是它会覆盖以前的结果，而不是在

下面显示

非常感谢提前

Answer 1

每次执行时，您对$(this).data的调用都会覆盖rightCont的内容。详情请见the JQuery API. .appendTo(...)电话就足够了。

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

如何在javascript中以下方显示数据

1 个答案: