Wie man eine Klasse ablöst, wenn ich mit JavaScript eine andere Klasse anklicke

Question

Ich habe eine Karte der USA mit auswählbaren Landkreisen, die bei einem Klick ihren Hintergrund auf rot ändern. Was ich möchte ist, wenn der Benutzer auf einen anderen Kreis klickt, wählt er den aktuellen Kreis aus und wählt dann nur den neuen Kreis aus. Gerade jetzt, wenn man auf die Kreisklasse klickt, ändert sich die Klasse, die einen roten Hintergrund bekommt, aber wenn man auf einen anderen Kreis klickt, dann sind beide rot. Hier

ist der Code, wo ich die Karte und ändern Klassen ziehen, wenn darauf geklickt:

 //DRAW MAP 
     d3.json("js/map.json", function(error, mapData){ 
      if (error) throw error; 
      //draw counties 
      edit.map.append("g") 
       .selectAll("path") 
       .data(topojson.feature(mapData, mapData.objects.counties).features) 
       .enter().append("path") 
       .attr("class", "counties") 
       .attr("d", edit.path) 
       .on("click", function(d){ 
        sFips = d.properties.STATEFP; 
        cFips = d.properties.COUNTYFP; 

        //display values in text boxes 
        $("#locationCountySelect").val(cFips); 
        $("#locationStateSelect").val(sFips); 

        //change clicked county class name     
        if (this.className.baseVal == "counties") { 
         this.className.baseVal = "selectedCounty"; 
         //send new county to db 
        } else { 
         this.className.baseVal = "counties"; 
        } 
       }); 
     }); 

Wieder, wie kann ich nur eine Grafschaft zu einem Zeitpunkt ausgewählt haben?

Answer 1

Zu diesem Zweck schlage ich vor, dass Sie jQuery zugunsten von D3 abziehen. Die folgenden zwei Zeilen in Ihrem click Zuhörer wird die Arbeit machen:

d3.select(".selectedCounty").attr("class", "counties"); 
d3.select(this).attr("class", "selectedCounty"); 

Die erste Anweisung wählt die Elementklasse mit .selectedCounty und setzt das class Attribut counties statt. Der zweite wählt das angeklickte Element aus und setzt seine Klasse auf .

Es könnte auch eine Überlegung wert, einen Verweis zu halten, um das aktuell ausgewählte Element in einer Variablen in dem äußeren Umfang nicht auf jedem Klick neu auswählen mit:

var selectedCounty = d3.select(".selectedCounty"); 

edit.map.append("g") 
// ... 
    .on("click", function(d) { 
    selectedCounty.attr("class", "counties"); 
    selectedCounty = d3.select(this).attr("class", "selectedCounty"); 
    } 

Wie comment von Teton-Coder angeforderte dort Möglicherweise muss die Klasse umgeschaltet werden, anstatt sie einfach zu ersetzen. Wenn Sie selection.attr("class", "selectedCounty") verwenden, wird der Wert des Attributs class festgelegt, wodurch alle anderen für das Element festgelegten Klassen ersetzt werden. Obwohl Sie über diese Funktion eine durch Leerzeichen getrennte Liste an das Attribut übergeben können, ist die einfachste Möglichkeit, eine bestimmte Klasse für ein Element zu aktivieren, die Verwendung von selection.classed(). Das zweite Argument dieser Funktion ist ein boolescher Wert, der festlegt, ob die Klasse entweder dem Element zugewiesen oder aus ihm entfernt werden soll, während alle anderen Klassen intakt bleiben. Der obige Code kann somit wie folgt umgeschrieben werden:

var selectedCounty = d3.select(".selectedCounty"); 

edit.map.append("g") 
// ... 
    .on("click", function(d) { 
    selectedCounty.classed("selectedCounty", false); 
    selectedCounty = d3.select(this).classed("selectedCounty", true); 
    }