使用jQuery显示和隐藏div并添加/清除div内容

Question

我有一组单选按钮来控制一组div容器。当单击一个单选按钮时，它会打开相应的div并隐藏所有其他的div。

jQuery函数通过控制CSS来实现。

在jQuery函数内部，我还从另一个div中添加HTML。

问题是，当通过单选按钮进行切换时，某些div内容会被复制。如果我点击，然后再次点击，它会再次复制。

我希望有一个更好的方法来做到这一点，使它看起来更干净，也不重复的HTML内容。

这是我的代码：

var questionCounter = 1; 
var parentId; 
var answerHTML; 
$(function() { 
    $('[name=RadioButtonClicked]').click(function() { 
     $('#' + $(this).attr('class')).fadeIn().siblings('div').hide(); 
     questionCounter = 1; 

     var RadioButtonClicked = $(this).attr("id"); 

     var newTextBoxDiv = $("<div>").attr("id"); 

     if (RadioButtonClicked == 'radBoxA') { 
      parentId = "#BoxA"; 
      $("#BoxA").css("display", "block"); 
      $("#BoxB").css("display", "none"); 
      $("#BoxC").css("display", "none"); 
      $("#BoxD").css("display", "none"); 
      answerHTML = $("#BoxA_Answer").html(); 

     } else if (RadioButtonClicked == 'radBoxB') { 
      parentId ="#BoxB"; 
      $("#BoxB").css("display", "block"); 
      $("#BoxA").css("display", "none"); 
      $("#BoxC").css("display", "none"); 
      $("#BoxD").css("display", "none"); 
      answerHTML = $("#BoxB_Answer").html(); 

     } else if (RadioButtonClicked == "radBoxC") { 
      parentId = "#BoxC"; 
      $("#BoxC").css("display", "block"); 
      $("#BoxB").css("display", "none"); 
      $("#BoxA").css("display", "none"); 
      $("#BoxD").css("display", "none"); 
      answerHTML = $("#BoxC_Answer").html(); 

     } else { 
      parentId = "#BoxD"; 
      $("#BoxD").css("display", "block"); 
      $("#BoxB").css("display", "none"); 
      $("#BoxA").css("display", "none"); 
      $("#BoxC").css("display", "none"); 
      answerHTML = $("#BoxD_Answer").html(); 
     } 
     newTextBoxDiv.remove(); 
     newTextBoxDiv.html(answerHTML); 
     $(parentId).append(newTextBoxDiv); 
     questionCounter++; 

    }) 
    //.filter(':checked').click(); 
}); 

由于使用的

Answer 1

html()代替append()

追加：插入的内容，到指定的元素

HTML的末尾：将它插入到指定的元素（替换整个内容中的整个内容）指定的元素）

替换此

$(parentId).append(newTextBoxDiv); 

与

$(parentId).html(newTextBoxDiv);