Displaying data one per record in jquery or javascript

Question

hi guys how can I display the data only once not like on my attached screenshot I display that data by hovering on the corresponding markers on the map

hi I have updated my code for better look of what I have now

Screenshot

Here is my updated Codes

HTML

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

My 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

If I understand correctly, you need a mechanism to allow a hover handler displayData() to know whether or not a .rightcontainer for the hovered element has been created previously.

The simplest way to do this is to exploit jQuery's .data() to keep a reference to each .rightcontainer as it is created. Thus, there's something to test next time round.

I have had a good hack at all the code to knock it into better shape, though there's no guarantee I've not introduced errors.

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

tested only for parse errors

Answer 2

There is not so much different to show from hidden , adding background color you will see understand this if not let me know i can explain as much as possible i know

$('.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>