Verketten von jQuery-Events zusammen mit Raphael/Mapael

Question

Ich benutze ein Mapael, ein Raphael Plug-in, um eine interaktive Karte zu erstellen. Ich suche nach einem Bereich der Karte, wenn Sie darauf klicken, und wenn der Bereich erneut angeklickt wird, wird er wieder auf die Standardfarbe zurückgesetzt. Hier ist ein Plnk;

http://plnkr.co/edit/VNUYsO0TeX7AIdLqLjiG

Wie Sie sehen können, können Sie nur auf einen Teil der Karte klicken. Das Problem ist jedoch, wenn Sie das Listenelement verwenden. Ich möchte, dass beide Funktionen zusammen funktionieren, also kann immer nur ein Bereich der Karte grün erscheinen.

Hier ist der Code, den ich denke, muss sich ändern;

JavaScript:

var green = "#9FCC3B"; 
var grey = "#ededed"; 
var previousSelectedElementId = null; 

    $("ul#countries li a").click(function() { 
    var updatedOptions = { 
     'areas': {} 
     }, 
     inputVal = $(this).attr("map") 

    if (previousSelectedElementId !== null) { 
     updatedOptions.areas[inputVal] = { 
     attrs: { 
      fill: grey 
     } 
     } 

    } 

    if (inputVal) { 
     updatedOptions.areas[inputVal] = { 
     attrs: { 
      fill: green 
     } 
     }; 
     previousSelectedElementId = inputVal; 
    } else { 
     updatedOptions.areas[inputVal] = { 
     attrs: { 
      fill: grey 
     } 
     }; 
     previousSelectedElementId = null; 
    } 


    $(".mapcontainer").trigger('update', [updatedOptions, {}, 
     [] 
    ]); 

    $("#selectCountry").html($(this).text()) 
    }); 

HTML:

<ul> 
    <li><a href="#" id="selectCountry">France</a> 
     <ul id="countries"> 
     <li><a href="#" map="BE">Belgium</a></li> 
     <li><a href="#" map="FR">France</a></li> 
     <li><a href="#" map="NL">Netherlands</a></li> 
     </ul> 
    </li> 
    </ul> 

Derzeit, wenn ein Listenelement es die Karte Attribut nimmt geklickt wird, die die gleichen wie die Pfadkennungen in der map.js Datei ist, und verwendet dann die updatedOptions, um die Farbänderung durchzuführen.

Ich bin mir nicht sicher, ob ich die vorherigeSelectedElementId wiederverwenden kann, um dieselbe Funktionalität zu replizieren, die mit dem click-Ereignis funktioniert?

Hoffentlich habe ich das Problem gut genug erklärt, wenn weitere Informationen erforderlich sind, kann ich bei Bedarf zur Verfügung stellen.

Prost

---

EDIT:

Ich habe mit ihm ein wenig mehr herumspielen, und dachte, die Möglichkeit, die Auswahl zu einem versteckten Textfeld verknüpfen und die .one Handler? Leider kann ich es nicht zur Arbeit bringen, aber hier ist ein Plnk, wenn jemand denkt, dass die Idee eine brauchbare Alternative ist;

http://plnkr.co/edit/4dskLo0w1XZkPckyE61z?p=info

(Es funktioniert, wenn Sie (‚FR‘ eingeben, ‚NL‘, ‚BE‘ usw. manuell)

Answer 1

ich eine Lösung für so etwas wie dies, dass Sie diese Funktion in Ihrem Klick hinzufügen in Mapael. Sie definieren previousSelectedElementId als null außerhalb der gesamten mapael Funktion. es ist nicht genau das tut, was Sie wollen, aber es ist ziemlich nah dran.

if (previousSelectedElementId !== null) { 
    newData.areas[previousSelectedElementId] = { 
     attrs: { 
      fill: "rgba(255,255,255,0.3)" 
     } 
    }; 
} 

if (mapElem.originalAttrs.fill == "rgba(255,255,255,0.3)") { 
    newData.areas[id] = { 
     attrs: { 
      fill: "rgba(0,0,0,1)" 
     } 
    }; 
    previousSelectedElementId = id; 
} else { 
    newData.areas[id] = { 
     attrs: { 
      fill: "rgba(255,255,255,0.3)" 
     } 
    }; 
    previousSelectedElementId = null; 
} 

$(".world").trigger('update', [{mapOptions: newData}]);