кнопка onload в javascript

Question

По ссылке: 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'); 
    } 
}()); 

ли кто-нибудь идею? Большое спасибо! Bouke

Answer 1

Вот мое решение. Если вы поместите свой код в 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 очень полезен.