Как изменить все элементы, кроме элемента, по которому щелкнули?

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

С помощью решения 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")
    }
}

Answer 2

Попробуйте этот код:

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

.

Но помните ... вы все еще не думали о том, что произойдет, если у вас есть выбранная страна и пользователь нажимает на другую.

Удачи!