Блог

По ссылке:http://boukestar.nl/ani-map вы можете видеть, что я настроил векторную svg-карту, которая анимирована.

Моя единственная проблема в том, что я не знаю, как отключить или включить кнопку / страну, когда вы нажимаете на другую кнопку / страну. Все кнопки остаются активными, когда вы нажимаете на другую кнопку.

Это приводит к некорректной информации из загруженной страны.

HTML

 <button class="usa" onClick="usa()" class="hidden">Verendigde Staten</button><div id="landusa" class="hide"><img src="svg/infovs.svg" viewBox="0 0 1087 841.89"></div><div id="div1" style="display: none;"></div>
  

JS

 (function() {
    'use strict';
    var svg,
        button;
    document.addEventListener('DOMContentLoaded', function init() {
        button = document.querySelector('.usa');
        svg = document.querySelector('svg');
        button.addEventListener('click', clickHandler, false);
    });

    function clickHandler(e) {
        svg.classList.toggle('usa');
        e.target.classList.toggle('on');
    }
}());
  

У кого-нибудь есть идея?
Большое спасибо!
Букэ

Вот мое решение. Если вы поместите свой код в JSFiddle или CodePen, я смогу его протестировать:

 <script>
document.addEventListener("DOMContentLoaded", function init(){
    var svg = document.querySelector("svg"),
        currentCountry,
        currentButton;


    function toggle(clickedButtonCountry){
        var clickedButton = document.querySelector("."   clickedButtonCountry);
        currentButton.classList.remove("on");
        clickedButton.classList.add("on");
        clickedButton.classList.remove("hidden");
        currentButton.classList.add("hidden");
        svg.classList.remove(currentCountry);
        svg.classList.add(clickedButtonCountry);
        currentCountry = clickedButtonCountry;
        currentButton = clickedButton;
    }
});
</script>

<button class="usa hidden" onClick="toggle('usa')">Verendigde Staten</button>
<button class="brazil hidden" onClick="toggle('brazil')">Brazil</button>

<svg></svg>
  

Таким образом, Javascript «запоминает», какая страна отображается в данный момент, а затем, когда кто-то нажимает на кнопку, он «запоминает» эту страну вместо этого.

Некоторые вещи, которые следует иметь в виду:

• usa() означает, что у вас есть function usa(){} где-то, чего у вас нет (и не должно быть). Я думаю, вы собирались сделать что-то вроде toggle('usa')
• У вас может быть несколько классов в одном class атрибуте, например <div class="foo1 bar2"></div>
• document.querySelector возвращает только один элемент. document.querySelectorAll возвращает множество.
• Использование classList.toggle может быть немного странным, потому что в нем не указано, следует ли добавлять или удалять класс. Я предпочитаю явно использовать classList.add и classList.remove . classList.contains очень полезен.