javascript - 当先前的值已被使用时，如何使用更改的变量值？

Question

我正在尝试使用具有基值的变量，该变量在我的代码中多次使用。稍后当单击按钮时，我想使用另一个值。所以当这个变量的值改变时，事情也必须改变，有点像绑定。

我面临的问题是变量正在发生变化，但我正在使用的其他方法不会随之改变，因为它们已经被使用过（我希望它们在发生这种情况时再次运行）。那么最好的方法是什么？

如果有不清楚的地方，请询问更多信息：）提前谢谢大家！

var gebouwen = {
    "zoneBounds": [[20,25], [30,35]],
    "minZoom": 2,
    "maxZoom": 5,
    "bounds1": -20,
    "bounds2": -20,
    "bounds3": 55,
    "bounds4": 65,
    "boundsmap": [[0,0], [35, 45]],
    "imageBuilding": 'img/building2.png'
};
var gebouw1 = {
    "zoneBounds": [[30,35], [40,45]],
    "minZoom": 2,
    "maxZoom": 3,
    "bounds1": -10,
    "bounds2": -10,
    "bounds3": 55,
    "bounds4": 85,
    "boundsmap": [[0,0], [45, 75]],
    "imageBuilding": 'img/plattegrond.png'
};
var gebouw2 = {
    "zoneBounds": [[30,35], [40,45]],
    "minZoom": 2,
    "maxZoom": 3,
    "bounds1": -10,
    "bounds2": -10,
    "bounds3": 55,
    "bounds4": 85,
    "boundsmap": [[0,0], [35, 45]],
    "imageBuilding": 'img/building2.png'
};

所以这些是我使用的变量。gebouwen 是主要的，如果我点击一个按钮，gebouwen 将等于 gebouw1，如果我按下另一个按钮，gebouwen 将等于 gebouw2（gebouw = 建筑物）。

<div id="building_page"> 
   <button id="building_1" >building 1</button>
   <button id="building_2" >building 2</button>
</div>

这是 HTML

var buttonBuilding1 = document.getElementById("building_1");
var buttonBuilding2 = document.getElementById("building_2");

buttonBuilding1.addEventListener("click", function() {
    tabbar.style.display = "flex";
    mapPage.style.display = "block";
    buildingPage.style.display = "none";
    gebouwen = gebouw1;
})

buttonBuilding2.addEventListener("click", function() {
    tabbar.style.display = "flex";
    mapPage.style.display = "block";
    buildingPage.style.display = "none";
    gebouwen = gebouw2;
})

例如，我在这个变量中使用了 gebouwen。但是，当它被设置并单击按钮时，我也希望它改变。

标签： javascriptfunctionvariablesbindingbindable