javascript - 在jquery或javascript中显示每条记录的数据

Question

大家好，我怎样才能只显示一次数据而不是像我所附的屏幕截图那样我通过将鼠标悬停在 map 上相应的标记上来显示该数据

嗨，我已经更新了我的代码，以便更好地查看我现在拥有的内容

Screenshot

这是我更新的代码

HTML

<div id="searchcontainer"></div>

我的Javascript

function displayData(e)
{
  var html = '';
  var html2 = '';
  var notice = '';
  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;
        break;
    }
}
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>';

`html2 += '<div class="rightcontainer" onclick="DisplayProfileCard();">';
html2 += '<img id="productimage" src="src/images/retrofit.png"/>';
html2 += '<div id="imagedetail">';
html2 += '<span class="details">Product Type</span>';
html2 += '<span class="details">Version / Size</span>';
html2 += '<span class="details">Estimated annual Spend</span>';
html2 += '<span class="details">Site name / manufacturer</span>';
html2 += '<span class="details">Selling Sales Eng</span>';
html2 += '</div>';
html2 += '</div>';`

if (!document.getElementById('map_tooltip')) {
    tooltipdiv = $("<div></div>").attr('id', "map_tooltip");
    $(document.body).append(tooltipdiv);
    $(tooltipdiv).css({
        "display": "block", "padding": "5px",
        "position": "absolute",
        "z-index": "13000",
        "cursor": "default",
        "font-family": "Segoe UI",
        "color": "#707070",
        "font-size": "12px", "pointer-events": "none",
        "background-color": "#FFFFFF",
        "border": "1px solid #707070"
    });
}
else
{
    tooltipdiv = $("#map_tooltip");
    $(tooltipdiv).css({
        "left": (e.pageX + 5),
        "top": (e.pageY + 5)
    });
    $(tooltipdiv).html(html).show("slow");
    $('#searchcontainer').innerHTML = "";
    //$('#defaulttext').hide();
    $('#searchcontainer').append(html2);
    $('.rightcontainer').eq($(this).index()).addClass('background');
}

Answer 1

如果我理解正确，您需要一种机制来允许悬停处理程序 displayData() 知道之前是否已创建悬停元素的 .rightcontainer .

最简单的方法是利用 jQuery 的 .data() 在创建每个 .rightcontainer 时保留对它的引用。因此，下一次需要测试一些东西。

我对所有代码进行了很好的修改，使其变得更好，尽管不能保证我没有引入错误。

function displayData(e) {
    var mapMarkers = $('#mapContainer .e-mapMarker').get(),
        $tooltipDiv = $('#map_tooltip'),
        grandParent = e.target.parentNode.parentNode,
        flsSite = flsSites[mapMarkers.indexOf(grandParent)],
        $searchcontainer = $('#searchcontainer');

    if(!flsSite) return; // probably?

    // Create tooltip if it doesn't already exist.
    if ($tooltipdiv.length === 0) {
        $tooltipdiv = $('<div id="map_tooltip">' +
            '<div id="infocontainer">' +
            '<div class="p-image"><img src="src/images/retrofit.png"/></div>' +
            '<div class="popupdetail">' +
            '<div class="p-name site"> Site Name: <span></span></div>' +
            '<div class="p-name status"> Site Status: <span></span></div>' +
            '<div class="p-name country"> Country: <span></span></div>' +
            '</div></div></div>').css({
            'display': 'block',
            'position': 'absolute',
            'z-index': '13000',
            'padding': '5px',
            'border': '1px solid #707070',
            'cursor': 'default',
            'pointer-events': 'none',
            'font-family': 'Segoe UI',
            'font-size': '12px',
            'color': '#707070',
            'background-color': '#FFFFFF'
        }).appendTo(document.body);
    }

    // Surely, the code below needs to be executed whether the tooltipdiv is freshly created or not, therefore shouldn't be in an else block. 
    $tooltipdiv.find('.site span').text(flsSite.site_name).end()
        .find('.status span').text(flsSite.status).end()
        .find('.country span').text(flsSite.country_name).end()
        .css({ 'left': e.pageX + 5, 'top': e.pageY + 5 })
        .show('slow');

    // If a previously created rightcontainer doesn't exist, then create one and keep a reference to it.
    if(!$(this).data('rightCont')) {
        $(this).data('rightCont', $('<div class="rightcontainer">' +
        '<img id="productimage" src="src/images/retrofit.png"/>' +
        '<div id="imagedetail">' +
        '<span class="details">Product Type</span>' +
        '<span class="details">Version / Size</span>' +
        '<span class="details">Estimated annual Spend</span>' +
        '<span class="details">Site name / manufacturer</span>' +
        '<span class="details">Selling Sales Eng</span>' +
        '</div></div>').on('click', DisplayProfileCard).appendTo($searchcontainer));
    }

    // Unhighlight all rightcontainers and highlight the current one, whether it was made earlier or just now.
    $searchcontainer.find('.rightcontainer').removeClass('background');
    $(this).data('rightCont').addClass('background');
}

仅测试解析错误