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语句，因此即使我在不活动的状态下单击它，也会得到{{ 1}}警报。

Answer 1

尝试以下代码：

。

但是请记住，您仍然没有考虑过当您单击某个国家/地区并用户单击另一个国家/地区时会发生什么。

祝你好运！

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

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

2 个答案: