Interaktive Karte auf Klick (SVG + jQuery)

Question

Dies ist meine erste Frage, also bitte sei sanft. Ich möchte eine interaktive SVG-Karte erstellen, die eine Reihe von Feldern neben der Karte mit Daten zu jedem Grundstück anzeigt, wenn ich auf dieses Grundstück klicke (Losnummer, Losgröße, Lospreis usw.) Ich benutze nur Hover-Zustände, bin aber auf der Suche nach einer mobilfreundlicheren Alternative und daher wäre Gedankenklick eine bessere Option, daher mein Ausflug in jQuery. Sie können the site map hier sehen. Ich bin sehr Neuling in Bezug auf jQuery, und so meine frühen Versuche waren ausführlich, nicht skalierbar und auch, hat nicht funktioniert (Beispiele unten).

SVG (inline in meinem HTML-Dokument, indem nur die ersten 2 von 103 Los Referenz)

<g id="lotsPending"> 
    <rect x="234.2" y="21.6" class="yellowSold lot1" width="33.8" height="60"/> 
    <rect x="201.6" y="21.6" class="yellowSold lot2" width="30.7" height="60"/> 
</g> 

... und die Daten, die die Felder neben der Karte zu füllen:

<div class="sitemap-specs"> 
     <h3>Lot No.</h3> 
     <div class="lotspec revtype"> 
     <span class="lot1 spec m-hide">001</span> 
     <span class="lot2 spec m-hide">002</span> 
     </div> 
     <h3>Status</h3> 
     <div class="lotspec revtype"> 
     <span class="lot1 spec m-hide">PENDING</span> 
     <span class="lot2 spec m-hide">PENDING</span> 
     </div> 
     <h3>Size</h3> 
     <div class="lotspec revtype"> 
     <span class="lot1 spec m-hide">1.4ac</span> 
     <span class="lot2 spec m-hide">1.6ac</span> 
     </div> 
     <h3>Price</h3> 
     <div class="lotspec revtype"> 
     <span class="lot1 spec m-hide">$1,250,000</span> 
     <span class="lot2 spec m-hide">$1,350,000</span> 
     </div> 
     <h3>Additional Info</h3> 
     <div class="lotspec revtype"> 
     <span class="lot1 spec m-hide">Entry-way lot facing the north bound of the park.</span> 
     <span class="lot2 spec m-hide">Row lot stationed near the north entrance of the park.</span> 
     </div> 
    </div> 

jQuery

$('.lot1').click(function() { 
    $('.spec').addClass("m-hide"); 
    setTimeout($('.lot1 spec').removeClass("m-hide"), 100); 
}); 

Meine Erwartung war, dass mit der Klasse auf dem Grundstück beim Anklicken .lot1, dass alle ‚.spec‘ Objekt s würde verbergen (die m-hide-Klasse in meinem CSS ist eine Anzeige: keine), gefolgt von den Objekten mit den Klassen ".lot1 spec", die die m-hide-Klasse entfernt haben, sodass sie sichtbar sind. Nach einigen Recherchen kann ich kein Beispiel dafür finden, dass eine Karte auf ähnliche Weise erstellt wird, was mich zu der Annahme verleitet, dass es einen besseren Weg gibt, den ich nicht aufgreifen kann.

Answer 1

könnte nur ein Tippfehler sein, aber Ihre Wähler fehlen eine Periode:

setTimeout($('.lot1.spec').removeClass("m-hide"), 100); 

die ‚m-hide‘ Klasse von Elementen mit sowohl ‚lot1‘ und ‚spec‘ Klassen entfernen, das, was Sie haben, während

setTimeout($('.lot1 spec').removeClass("m-hide"), 100); 

die ‚m-hide‘ Klasse von einem <spec> Element, das ein Kind eines Elements ist mit ‚lot1‘ Klasse entfernen.

& meine 2 Cent, mit so vielen Lots, würde ich in Betracht ziehen, dynamisch die Felder mit den richtigen Daten zu füllen, indem Sie jquery in Ihrem Click-Handler verwenden.