如何更改除clicked元素之外的所有元素？

Question

我正在使用Javascript和D3.js进行世界地图可视化。 当您单击某个国家/地区时，所有其他国家/地区都会获得一个inactiveCountry的类，该类会添加opacity: 0.3 ，突出显示所选国家/地区。 我想要的是，当您再次单击突出显示的国家/地区时，所有其他国家/地区都会失去类inactiveCountry因此它们的opacity: 1 。

这是地图：

选择国家时：

以下是绘制和着色地图的代码：

  g.selectAll("path").data(countries.features) .enter().append("path") .attr("d", pathGenerator) .attr("class", "country") .attr("id", function (d){ return d.properties.name }) .attr("fill", function (d) { return colorScaleWorldmap(colorValue(d)) }) .on("click", function (d) { changeCountry(d.properties.name); }) .append("title") .text(function (d) { return d.properties.name + ": " + colorValue(d); }); 

如您所见，当您单击某个国家/地区时，它会运行函数changeCountry(); ，这是：

 function changeCountry(countryName) { country = countryName; console.log(country); let totalCountries = document.getElementsByClassName("country"); // Remove class countryActive from previous selection for (let i = 0; i < totalCountries.length; i++) { if (totalCountries[i].classList.contains("countryActive")) { totalCountries[i].classList.replace("countryActive", "countryInactive") } } // Add class countryActive to selected country let element = document.getElementById(country); element.classList.add("countryActive"); for (let i = 0; i < totalCountries.length; i++) { if (totalCountries[i].classList.contains("countryActive")) { totalCountries[i].classList.remove("countryInactive") } else { totalCountries[i].classList.add("countryInactive") } } } 

我将如何添加交互，当您再次单击所选国家/地区时 ，所有国家/地区都会变为可见（从而失去类countryInactive ）？ 我尝试过使用JQuery .click和.data组合：

  $("#" + country).click(function(){ $(this).data('clicked', true); }); if($("#" + country).data('clicked')) { alert('yes'); } 

这段代码的问题在于，一旦我点击了一个国家至少一次，它似乎保留了true陈述，所以即使我在它处于非活动状态时点击它，我也会得到yes警告。

Answer 1

试试这段代码：

function changeCountry(countryName) {

    let clickedContry = document.getElementById(countryName);
    let totalCountries = document.getElementsByClassName("country");

    if(clickedContry.classList.contains("countryActive")) {
        for (let i = 0; i < totalCountries.length; i++) {
            if (totalCountries[i].classList.contains("countryInactive")) {
                totalCountries[i].classList.replace("countryInactive", "countryActive");
            }
        }
    } else {
        // Remove class countryActive from previous selection
        clickedContry.classList.add("countryActive");
    }
}

。

但请记住..你仍然没有考虑当你点击一个国家而用户点击另一个国家时会发生什么。

祝好运！

Answer 2

在thiagotrss提供的解决方案的帮助下，我设法自己解决了这个问题。 这就是我做的方式：

 function changeCountry(countryName) { let totalCountries = document.getElementsByClassName("country"); let clickedCountry = document.getElementById(countryName); country = countryName; console.log(country); if (clickedCountry.classList.contains("countryActive")) { clickedCountry.classList.remove("countryActive") country = "Total countries"; for (let i = 0; i < totalCountries.length; i++) { if (totalCountries[i].classList.contains("countryInactive")) { totalCountries[i].classList.remove("countryActive") totalCountries[i].classList.remove("countryInactive") } } } else { for (let i = 0; i < totalCountries.length; i++) { if (totalCountries[i].classList.contains("countryActive")) { totalCountries[i].classList.remove("countryActive") } else if (!totalCountries[i].classList.contains("countryActive")) { totalCountries[i].classList.add("countryInactive") } } clickedCountry.classList.add("countryActive") } }