通过 Onclick 使用 appendChild/replaceChild 函数切换图像堆栈

Question

大家好，我想通过 onclick 功能切换图像堆栈集。这里的问题是 appendchild 总是会添加一个新的图像堆栈而不是替换原始图像堆栈。

我试过replacechild()，但显然全局变量和函数不受本地变量的影响。有没有更好的方法来实现开关功能？

<div>

  <button id="softtissue" type="button" onclick="softtissue();return false" class="button">

  Soft Tissue</button>

  <button id="bone" type="button" onclick="bone(); return false;" class="button">

    Bone</button>

  <button id="lung" type="button" onclick="lung(); return false" class="button">

    Lung</button>

</div>

<div class="example">

</div>

Answer 1

在添加新的图像堆栈之前，我通过添加一个清除所有代码的删除循环来修复它。var images= images10;var stack = new ImageStack({&nbsp; images: images,&nbsp; height: '512px',&nbsp; width: '512px'});document.querySelector('.example').appendChild(stack);function softtissue(){&nbsp; &nbsp; let element = document.querySelector(".example");while (element.firstChild) {&nbsp; element.removeChild(element.firstChild);}&nbsp; &nbsp; var images= images10;var stack1 = new ImageStack({&nbsp; images: images,&nbsp; height: '512px',&nbsp; width: '512px'});document.querySelector('.example').appendChild(stack1);}function bone(){&nbsp; &nbsp; let element = document.querySelector(".example");while (element.firstChild) {&nbsp; element.removeChild(element.firstChild);}var images= imagesbone;var stack2 = new ImageStack({&nbsp; images: images,&nbsp; height: '512px',&nbsp; width: '512px'});document.querySelector('.example').appendChild(stack2);&nbsp;}function lung(){&nbsp; &nbsp; let element = document.querySelector(".example");while (element.firstChild) {&nbsp; element.removeChild(element.firstChild);}var images= imageslung;var stack3 = new ImageStack({&nbsp; images: images,&nbsp; height: '512px',&nbsp; width: '512px'});document.querySelector('.example').appendChild(stack3);}