使用 jQuery 显示和隐藏 div 以及添加/清除 div 内容答案

【问题标题】：showing and hide divs using jQuery and adding/clearing div content使用 jQuery 显示和隐藏 div 以及添加/清除 div 内容
【发布时间】：2013-05-05 13:00:48
【问题描述】：

我有一组控制一组 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吗？或者更好的是，一个 jsfiddle？

标签： javascript jquery

【解决方案1】：

使用html() 代替append()

append : 将内容插入到指定元素的末尾

html：将其插入指定元素（替换指定元素内的全部内容）

替换这个

$(parentId).append(newTextBoxDiv);

与

$(parentId).html(newTextBoxDiv);

【讨论】：