通过 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({

  images: images,

  height: '512px',

  width: '512px'

});

document.querySelector('.example').appendChild(stack);

function softtissue(){

    let element = document.querySelector(".example");

while (element.firstChild) {

  element.removeChild(element.firstChild);

}

    var images= images10;

var stack1 = new ImageStack({

  images: images,

  height: '512px',

  width: '512px'

});

document.querySelector('.example').appendChild(stack1);

}

function bone(){

    let element = document.querySelector(".example");

while (element.firstChild) {

  element.removeChild(element.firstChild);

}

var images= imagesbone;

var stack2 = new ImageStack({

  images: images,

  height: '512px',

  width: '512px'

});

document.querySelector('.example').appendChild(stack2); 

}

function lung(){

    let element = document.querySelector(".example");

while (element.firstChild) {

  element.removeChild(element.firstChild);

}

var images= imageslung;

var stack3 = new ImageStack({

  images: images,

  height: '512px',

  width: '512px'

});

document.querySelector('.example').appendChild(stack3);

}