javascript - 使用 JavaScript 或 jQuery 避免重复结果

Question

大家好，我一直想知道如何避免使用 for 循环在 JavaScript 或 jQuery 上显示相同的结果

这是我的代码:

function displayData(e)
{
var html = '';
var html2 = '';
var x = '';

var mapDiv = document.getElementById('mapContainer'), i = 0,
     dataIndex, tooltipDiv, key
mapMarkers = $(mapDiv).find('.e-mapMarker'), index = 0;
var divCont = $(mapDiv).find('#rightdiv'), 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>';




html2 += '<div class="rightcontainer">';
html2 += '<img id="productimage" src="src/images/retrofit.png" onclick="DisplayProfileCard();"/>';
html2 += '<div id="imagedetail">';
html2 + '<input type="hidden" value='+ flsSites[index].serial_number +'/>';
html2 += '<span class="details">Product Type:' + flsSites[index].serial_number +'</span>';
html2 += '<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>';
html2 += '<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>';
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": "none", "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");
    //$('#defaulttext').hide();
    //$('#searchcontainer').append(html2);
    //$('.rightcontainer').eq($(this).index()).addClass('background');
    $(html2).appendTo("#searchcontainer");
}

现在，在这段代码中，我可以通过将鼠标悬停在 map 上的标记上来在 div 上显示结果，但是如果我返回之前悬停的标记而不是突出显示其相应的结果，它只会再次渲染相同的结果结果如下，我不需要

Answer 1

您可以使用 Set object存储渲染器的每个结果，并在渲染每个结果之前检查它是否已经存在。

不幸的是，旧版浏览器不支持Set 对象。

但是您可以通过简单地使用常规对象的键来模拟它。例如:

var Idx = {};
function renderOne(flsSite) {
    if (Idx[flsSite.name]) return; // Here I suppose same name => same result.
    Idx[flsSite.name] = true; // Mark as rendered.
    // Do render...
};

希望对你有帮助...