如何在使用javascript单击另一个类时取消选择一个类

我有一张美国地图，上面有可选择的县，点击后，这些县的背景会变成红色。我想做的是，当用户点击另一个县时，它取消选择当前县，然后只选择新县。当前，当单击county类时，它会更改该类，使其背景为红色，但当您单击另一个county时，两者都为红色

下面是我在单击时绘制地图和更改类的代码：

        //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";
                    }
              });
         });

---

再说一遍，我怎么能一次只选择一个县呢？

为此，我建议您放弃jQuery而选择D3。您的

单击

侦听器中的以下两行将完成此工作：

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

第一条语句选择具有class

.selectedCounty

的元素，并将

class

属性改为

countries

。第二个选择单击的元素，并将其类设置为

selectedCounty

还值得考虑的是，在外部范围的变量中保留对当前选定元素的引用，以避免每次单击时都必须重新选择：

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

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

根据Teton Coder的要求，可能需要切换类，而不仅仅是替换它。使用

selection.attr（“class”、“selectedCounty”）

将设置

class

属性的值，从而替换元素上设置的任何其他类。尽管可以通过此函数将空格分隔的列表传递给属性，但在元素上切换特定类的最简单方法是使用。该函数的第二个参数是一个布尔值，用于确定该类是应分配给元素，还是应在保留所有其他类不变的情况下从元素中删除。因此，上述代码可以重写为：

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

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

---

太棒了，谢谢你！第一个很有魅力。第二个不起作用。请再试试第二个。我编辑它以避免第一次单击时出现空值。我更喜欢第二种解决方案，因为它优于第一种解决方案。如果每个县都有多个类，而不是每个县都有相同的类，那么在删除selectedCounty类时，如何捕获其他类并将它们放回原处？这可能吗？@Teton Coder我添加了另一个变体，使用

selection.classed（）

，它将满足您在评论中的要求。当我第一次写我的答案时，我想到了这一点，但我选择了反对它，以尽可能接近你最初的问题。但是，我认为最后一种方法是最常用的方法，你是一个救生员！非常感谢！！