0

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();
});

ありがとう

4

1 に答える 1

3

html()の代わりに使用append()

append : 指定された要素の末尾にコンテンツを挿入します

html: 指定された要素に挿入します (指定された要素内のコンテンツ全体を置き換えます)

これを交換

$(parentId).append(newTextBoxDiv);

と

$(parentId).html(newTextBoxDiv);
于 2013-05-10T19:02:28.823 に答える