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

Question

I'm working on a world map visualization using Javascript and D3.js. When you click on a country all other countries get a class inactiveCountry which adds a opacity: 0.3 , which highlights the selected country. What I would like is that when you click the highlighted country again, all other countries lose the class inactiveCountry so they have a opacity: 1 again.

This is the map:

When selecting a country:

The following is the code that draws and colors the map:

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

As you can see, when you click on a country it runs the function changeCountry(); , which is this:

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

How would I go about adding an interaction where when you click the selected country again , all countries become visible (thus losing the class countryInactive )? I've tried using a JQuery .click and .data combination as such:

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

The problem with this piece of code is that once I've clicked a country at least once, it seems to keep the true statement, so even when I click it while it's inactive, I get the yes alert.

Answer 1

Try this code:

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

.

But remember.. you still didn't think about what will happen when you have a clicked country and the user click in another.

Good Luck!

Answer 2

With the help of the solution thiagotrss provided I managed to solve it myself. This is how I did it:

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