我有一组单选按钮,用于控制一组 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();
});
谢谢
最佳答案
使用html()
代替append()
append : inserts the content, to the end of specified elements
html: inserts it to the specified element (replaces the entire content inside the specified element)
替换这个
$(parentId).append(newTextBoxDiv);
与
$(parentId).html(newTextBoxDiv);
关于javascript - 使用 jQuery 显示和隐藏 div 以及添加/清除 div 内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16489106/