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();
});
ありがとう