Take the 2-minute tour ×
Code Review Stack Exchange is a question and answer site for peer programmer code reviews. It's 100% free, no registration required.

I am achieving a hover state per continent through:

var continentId =""
function getID(continentId){
    jQuery.each(mapObject.mapData.paths, function(i, val) {
            if (val.continent == continentId){
                continentCodes[i] = "#3e9d01";
                mapObject.series.regions[0].setValues(continentCodes);
            }
    });
}

function removeGetID(continentId){
    jQuery.each(mapObject.mapData.paths, function(i, val) {
            if (val.continent == continentId){
                continentCodes[i] = "#128da7";
                mapObject.series.regions[0].setValues(continentCodes);
            }
    });
}

//LIST COUNTRIES & CONTINENTS TEMP
jQuery('.continentLink').hover(function(e) {
    continentId = this.id;
    getID(continentId);
}, function(){
    removeGetID(continentId);
});

Is there any way to shorten this so that I don't have to have multiple each statements? I'm really trying to learn to write efficient code.

Here's the full code if it helps: JSFIDDLE

jQuery(function(){
//JSON MARKERS
var markers = [{latLng: [-34.033333300000000000, 23.066666700000040000], name: 'Knysna', info:'its got a lake...'},
    {latLng: [-33.924868500000000000, 18.424055299999963000], name: 'Cape Town', info:'its nice...'}];
//JSON MARKERS  

//JSON STYLING
var markerStyle = {initial: {fill: '#F8E23B',stroke: '#383f47'}};
var regionStyling = {initial: {fill: '#128da7'},hover: {fill: "#A0D1DC"}};
//JSON STYLING

//GLOBAL VARIABLES
var countryList = "", continentList = "";
var resultsDup = {};
var continentCodes = {};
//GLOBAL VARIABLES

//INIT MAP PLUGIN
jQuery('#world-map').vectorMap({
    map: 'world_mill_en',
    normalizeFunction: 'polynomial',
    markerStyle:markerStyle,
    regionStyle:regionStyling,
    backgroundColor: '#383f47',
    series: {regions: [{values: {},attribute: 'fill'}]},
    markers: markers,
    onRegionClick:function (event, code){
        jQuery('#world-map').vectorMap('set', 'focus', code);
    },
    onMarkerClick: function(events, index){
        jQuery('#infobox').html(markers[index].name);
    }
});
//INIT MAP PLUGIN

var mapObject  = jQuery('#world-map').vectorMap('get', 'mapObject');

//LIST COUNTRIES & CONTINENTS
jQuery.each(mapObject.mapData.paths, function(i, val) {

    countryList += '<li><a id='+i+' class="countryLink">'+val.name+'</a></li>';

    //remove duplicate continents
    var resultsList = val.continent;
    if (resultsDup[resultsList]) {
        jQuery(this).remove();
    }else{
        resultsDup[resultsList] = true;
        continentList += '<li><a id='+val.continent+' class="continentLink">'+val.continent+'</a></li>';
    }
    //remove duplicate continents


});
//display countries
jQuery('#countryList').html(countryList);

//display continents
jQuery('#continentList').html(continentList);

var continentId =""
function getID(continentId){
    jQuery.each(mapObject.mapData.paths, function(i, val) {
            if (val.continent == continentId){
                continentCodes[i] = "#3e9d01";
                mapObject.series.regions[0].setValues(continentCodes);
            }
    });
}

function removeGetID(continentId){
    jQuery.each(mapObject.mapData.paths, function(i, val) {
            if (val.continent == continentId){
                continentCodes[i] = "#128da7";
                mapObject.series.regions[0].setValues(continentCodes);
            }
    });
}

//LIST COUNTRIES & CONTINENTS TEMP
jQuery('.continentLink').hover(function(e) {
    continentId = this.id;
    getID(continentId);
}, function(){
    removeGetID(continentId);
});

//Zoom to Country Function
jQuery('.countryLink').click(function(e) {
    jQuery('#world-map').vectorMap('set', 'focus', this.id);
});

//Continent Hover function

});
share|improve this question

1 Answer 1

up vote 2 down vote accepted

You are looking to remove the copy pasted code, to make it more DRY.

Beyond that, it seems that really whether you getID or removeGetID, you set a number of ID's and then update mapObject. Furthermore, it seems that you do not need to update mapObject within the loop, which is slow.

I would counter-propose

var helpfullyNamedConstant1 = '#3e9d01';
var helpfullyNamedConstant2 = '#128da7';

function setContinentCodes(continentId, continentCodesValue ){
    jQuery.each(mapObject.mapData.paths, function(i, val) {
            if (val.continent == continentId){
                continentCodes[i] = continentCodesValue ;
            }
    });
    mapObject.series.regions[0].setValues(continentCodes);
}

jQuery('.continentLink').hover(function(e) {
    setContinentCodes(this.id, helpfullyNamedConstant1);
}, function(){
    setContinentCodes(this.id, helpfullyNamedConstant2);
});
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.