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

Question

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

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

截图

这是我更新的代码

.HTML

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

我的爪哒语

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

仅针对解析错误进行测试

Answer 2

显示与隐藏没有太大区别，添加背景颜色你会看到理解这一点，如果不让我知道我可以解释尽可能多的我知道

$('.first > ul > li').mouseenter(function(){
$('.second > ul > div').eq($(this).index()).addClass('background').removeClass('invisiblediv');
}).mouseleave(function(){
$('.second > ul > div').eq($(this).index()).removeClass('background').addClass('invisiblediv');
})

.first,.second{
  display:inline-block;
}
.first > ul > li {
  width:50px;
  background-color:#fff;
  text-align:center;
}
.first > ul > li:hover {
  background-color:#ff5722;
}
li{
  list-style-type: none;
  }
.background{
  background-color:red;
}
.invisiblediv{
  visibility:hidden;
}
img {
  width:50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='first'>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
<div class='second'>
<ul>
<div class='invisiblediv'><img src="https://upload.wikimedia.org/wikipedia/commons/f/f9/Phoenicopterus_ruber_in_S%C3%A3o_Paulo_Zoo.jpg"> </div>
<div class='invisiblediv'><img src="https://upload.wikimedia.org/wikipedia/commons/f/f9/Phoenicopterus_ruber_in_S%C3%A3o_Paulo_Zoo.jpg"> </div>
<div class='invisiblediv'><img src="https://upload.wikimedia.org/wikipedia/commons/f/f9/Phoenicopterus_ruber_in_S%C3%A3o_Paulo_Zoo.jpg"> </div>
</ul>
</div>