在jquery或javascript中为每条记录显示一个数据

嗨，伙计们，我怎么能只显示一次数据，不像我附加的屏幕截图 我通过在地图上相应的标记上悬停来显示数据

嗨，我已经更新了我的代码，以便更好地了解我现在拥有的东西

这是我的最新代码

HTML

我的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');
}

---

显示和隐藏并没有太大区别，添加背景色你们会看到，如果不让我知道，我可以尽可能多地解释我知道的

$'.first>ul>li.mouseenterfunction{ $'.second>ul>div.eq$this.index.addClass'background'。删除类'invisiblediv'； }.鼠标移动功能{ $'.second>ul>div.eq$this.index.removeClass'background.addClass'invisiblediv'； } .第一，.第二{ 显示：内联块； } .first>ul>li{ 宽度：50px； 背景色：fff； 文本对齐：居中； } .first>ul>li:悬停{ 背景色：ff5722； } 李{ 列表样式类型：无； } .背景{ 背景色：红色； } .看不见{ 可见性：隐藏； } img{ 宽度：50px； } 1. 2. 3.

---

如果我理解正确，您需要一种机制来允许悬停处理程序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');
}

---

只测试解析错误

你好，凯尔，你能在fiddle@MunkhdelgerTumenbayar不幸的是，我无法在jsfiddle上实现它，因为在我们的办公室有一些奇怪的技术困难blocked@Kyle由于JSFIDLE被阻止，您能创建一个代码段吗？Stackoverflow允许您创建代码段。你可以在问题编辑器的工具栏或窗口中找到相应的按钮，你可以按CTRL+M。@MunkhdelgerTumenbayar还记得我之前问的问题吗？在div1中鼠标悬停，然后在div2中突出显示相应的项目？这个问题和这个问题是并驾齐驱的，所以总的来说，你可以在地图上的一个标记上鼠标悬停然后它将显示在div2中，但不是高亮显示，而是再次显示，而不是高亮显示it@Kyle如果我理解正确的话，当我在div1上鼠标悬停时，对应的div2将从隐藏中显示？有太多的操作要做，我正在使用选择器添加和删除类@Munkhdelger Tumenbayar这次我尝试了你的代码但是，假设附加的文件是Highlite all，而不是一次突出显示一个项目$'searchcontainer'.appendhtml2.eq$this.index.addClass'background'@kyle i在div内为img编辑，在mouseenter上可见。mouseout将绝对隐藏imgjust对我的代码进行更新它与您的不一样例如我将鼠标悬停在1上它高亮显示1在我的情况下我将鼠标悬停在数字1上它显示并高亮显示1这是确定的，但如果我将鼠标悬停在数字2上，它将显示数字2，但它高亮显示数字1而不是number2@Kyle把所有的html和js都放到它不工作的地方什么也没发生我来试试你在哪里得到了rightCont你在var$rightCont中使用的是div或id的类吗？“rightCont”是一个任意名称。我犯了一个错误-目前在手机上-将在我回到桌面计算机时更正。现在它正常工作，但它实际上只显示一条记录，而不是每条记录显示一条记录。如果可能，我如何在前一条记录的下方渲染另一条记录？rightContainer div仅附加到searchContainer，从未删除。我能看到的唯一会导致它们消失的是一些CSS指令。

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