javascript - 如何通过按钮复制卡片中的对象
问题描述
我有一个包含多张 MCQ 卡的页面,如果需要,每个人都应该可以选择添加另一个选项,但我当前的功能将此选项添加到所有卡片
这是我的小提琴https://jsfiddle.net/abdotamer3/s57jauxw/11/
我的功能:
$(".TextInputSimpleInputPlaceholder").on("click", function () {
var clone = $(this).closest(".questionBodyRadioBody").find(".radioListItemPrimaryContent:first").clone(true);
clone.className = "radioListItemPrimaryContent";
clone.appendTo(".radioListItemView");
});
我的克隆功能:
function cloneQuestion() {
var question = document.querySelector(".questions");
var clone = question.cloneNode(true);
var numItems = $(".questions").closest(".radioListItemPrimaryContent").length;
var radioButtons = question.querySelectorAll(".radioItemToggle");
console.log(numItems);
clone.querySelector(".questionMainTextArea").value = "Untitled Question";
var addBtn = document.querySelector(".addQuestionBtnRow");
var tbody = addBtn.parentNode;
tbody.insertBefore(clone, addBtn);
}
解决方案
通常,您应该为选择器添加范围:
var $card = $(this).closest('.card');
$clone.appendTo($(".radioListItemView", $card));
我认为,选项编号也应该是每张卡。
$(".TextInputSimpleInputPlaceholder").on("click", function () {
var $card = $(this).closest('.card');
var numItems = $(".radioListItemPrimaryContent", $card).length;
var $clone = $(this).closest(".questionBodyRadioBody").find(".radioListItemPrimaryContent:first").clone(true);
$clone.className = "radioListItemPrimaryContent";
$clone.find(".optionText").val("Option " + numItems);
numItems++;
$clone.appendTo($(".radioListItemView", $card));
});
.card {
border-radius: .5rem !important;
width: 45rem;
}
.card-body {
padding: 1rem 1.5rem !important;
}
.form_frame td {
padding-top: 12px;
}
.FormHeaderBorder {
background-color: #673ab7;
color: rgba(255, 255, 255, 1);
border-top-left-radius: 8px;
border-top-right-radius: 8px;
height: 10px;
left: -1px;
position: absolute;
top: -1px;
width: calc(100% + 2px);
z-index: 1;
}
.card-selector {
display: flex;
height: calc(100% + 2px);
left: -1px;
position: absolute;
bottom: -1px;
width: 8px;
}
.card-selector-container {
display: flex;
flex-direction: column;
flex-grow: 1;
}
.card-selector-color {
background-color: transparent;
flex-grow: 1;
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
position: relative;
}
.viewItemActive .card-selector-color {
background-color: #4285f4;
}
.viewItemActive .questionMainTextAreaContent {
display: block;
}
.viewItemInactive .questionMainTextAreaContent {
display: none;
}
.questionMainTextAreaContent {
padding-top: 16px;
background-color: #f8f9fa;
border-radius: 4px 4px 0 0;
width: 60%;
}
.questionMainTextAreaContentArea {
padding-top: 0;
padding-bottom: 0;
display: flex;
position: relative;
}
.viewItemActive .questionHeader {
display: none;
}
.viewItemInactive .questionHeader {
display: block;
}
.questionMainTextArea {
height: 24px;
font-family: 'Google Sans', Roboto, Helvetica, Arial, sans-serif;
font-size: 16px;
letter-spacing: .1px;
line-height: 24px;
font-weight: 400;
color: #000;
flex-grow: 1;
flex-shrink: 1;
background-color: transparent;
border: none;
box-sizing: content-box;
caret-color: #1a73e8;
display: block;
min-height: 24px;
margin: 0;
outline: none;
overflow-y: visible;
overflow-x: hidden;
padding: 0 16px 16px;
resize: none;
white-space: pre-wrap;
z-index: 1;
}
.questionMainTextAreaUnderline {
background-color: #80868b;
bottom: 0;
height: 1px;
left: 0;
margin: 0;
padding: 0;
position: absolute;
width: 100%;
}
.questionMainTextArea:after {
background: none repeat scroll 0 0 transparent;
bottom: 0;
content: "";
display: block;
height: 2px;
left: 50%;
position: absolute;
background: #fff;
transition: width .3s ease 0s, left .3s ease 0s;
width: 0;
}
.questionMainTextArea:hover:after {
width: 100%;
left: 0;
}
.questionBodyRadioBody {
margin-right: 0;
margin-bottom: 24px;
}
.radioListItemView {
min-height: 48px;
background: #fff;
}
.radioListItemPrimaryContent {
-moz-box-align: start;
display: flex;
align-items: center;
}
.radioListItemGutter {
-moz-box-align: center;
align-items: center;
display: flex;
flex-shrink: 0;
height: 48px;
}
.radioListTypeIndicator {
font-family: Roboto, Arial, sans-serif;
font-size: 14px;
font-weight: 400;
letter-spacing: .2px;
line-height: 20px;
color: #202124;
margin-right: 10px;
}
input.radioItemToggle {
-moz-user-select: none;
transition: border-color .2s cubic-bezier(0.4, 0, 0.2, 1);
border-radius: 3px;
box-sizing: content-box;
cursor: pointer;
display: inline-block;
height: 20px;
outline: none;
position: relative;
vertical-align: middle;
width: 20px;
z-index: 0;
}
.radioListItemEditRegion {
padding-right: 2.5rem;
min-height: 48px;
display: flex;
flex: 1;
-moz-box-flex: 1;
flex-wrap: wrap;
}
.radioListValue {
flex-grow: 1;
-moz-box-align: center;
align-items: center;
display: flex;
}
.radioListMorseValue {
flex-grow: 1;
}
.radioListItemValueInput {
margin-top: 8px;
width: 100%;
-moz-user-select: none;
display: inline-block;
outline: none;
}
.TextInputSimpleInputContentArea {
display: flex;
}
.radioListItemValueInput .exportInput {
font-family: Roboto, Arial, sans-serif;
font-size: 14px;
font-weight: 400;
letter-spacing: .2px;
line-height: 20px;
color: #202124;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.TextInputSimpleInput {
flex-grow: 1;
flex-shrink: 1;
background-color: transparent;
border: none;
display: block;
font: 400 16px Roboto, RobotoDraft, Helvetica, Arial, sans-serif;
margin: 0;
min-width: 0;
outline: none;
padding: .125em 0;
z-index: 0;
}
.viewItemActive .radioListItemPrimaryContent:hover .exportUnderline,
.TextInputSimpleInputUnderline {
visibility: visible;
}
.viewItemActive .radioListItemPrimaryContent:focus-within .exportUnderline,
.TextInputSimpleInputUnderline {
visibility: visible;
}
.radioListItemValueInput .exportUnderline {
margin-top: 4px;
}
.TextInputSimpleInputUnderline {
background-color: rgba(0, 0, 0, 0.12);
height: 2px;
margin: 0;
padding: 0;
width: 100%;
visibility: hidden;
}
.radioListItemGhostItemInput {
flex-basis: auto;
margin-top: 7px;
width: auto;
display: inline-block;
outline: none;
}
.TextInputSimpleInputMainContent {
position: relative;
vertical-align: top;
}
.TextInputSimpleInputPlaceholder {
font-family: Roboto, Arial, sans-serif;
font-size: 14px;
font-weight: 400;
letter-spacing: .2px;
line-height: 20px;
color: #70757a;
}
.viewItemActive .itemHideInactive {
display: flex;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="card MCQuestion viewItemActive">
<div class="row g-0">
<div class="col">
<div class="card-body">
<div class="questionMainTextAreaContent">
<div class="questionMainTextAreaContentArea">
<textarea class="questionMainTextArea" tabindex="0" aria-label="Question title" dir="auto"></textarea>
<div class="questionMainTextAreaUnderline"></div>
<div class="questionMainTextAreaFocusUnderline"></div>
</div>
</div>
<div class="card-title questionHeader"></div>
<div class="questionBodyRadioBody">
<div class="radioListItemView">
<div class="radioListItemPrimaryContent">
<div class="radioListItemGutter">
<div class="radioListTypeIndicator">
<input type="radio" name="radio-0" class="radioItemToggle">
</div>
</div>
<div class="radioListItemEditRegion">
<div class="radioListValue">
<div class="radioListMorseValue">
<span>
<div class="radioListItemValueInput">
<div class="TextInputSimpleInputContentArea">
<input class="TextInputSimpleInput exportInput optionText" type="text" value="Option 1" tabindex="0">
</div>
<div class="TextInputSimpleInputUnderline exportUnderline"></div>
</div>
</span>
</div>
</div>
</div>
</div>
</div>
<div class="itemHideInactive radioListItemPrimaryContent">
<div class="radioListItemGutter">
<div class="radioListTypeIndicator">
<input type="radio" class="radioItemToggle" aria-checked="false" disabled>
</div>
</div>
<div class="radioListItemGhostItemInput">
<div class="TextInputSimpleInputMainContent">
<div class="TextInputSimpleInputPlaceholder" role="button">
<div class="TextInputSimpleInputContentArea">
<div class="TextInputSimpleInput exportInput optionText">
Add option
</div>
</div>
<div class="TextInputSimpleInputUnderline exportUnderline"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="card MCQuestion viewItemActive">
<div class="row g-0">
<div class="col">
<div class="card-body">
<div class="questionMainTextAreaContent">
<div class="questionMainTextAreaContentArea">
<textarea class="questionMainTextArea" tabindex="0" aria-label="Question title" dir="auto"></textarea>
<div class="questionMainTextAreaUnderline"></div>
<div class="questionMainTextAreaFocusUnderline"></div>
</div>
</div>
<div class="card-title questionHeader"></div>
<div class="questionBodyRadioBody">
<div class="radioListItemView">
<div class="radioListItemPrimaryContent">
<div class="radioListItemGutter">
<div class="radioListTypeIndicator">
<input type="radio" name="radio-0" class="radioItemToggle">
</div>
</div>
<div class="radioListItemEditRegion">
<div class="radioListValue">
<div class="radioListMorseValue">
<span>
<div class="radioListItemValueInput">
<div class="TextInputSimpleInputContentArea">
<input class="TextInputSimpleInput exportInput optionText" type="text" value="Option 1" tabindex="0">
</div>
<div class="TextInputSimpleInputUnderline exportUnderline"></div>
</div>
</span>
</div>
</div>
</div>
<div class="radioListMorselRoot itemHideInactive">
<div class="radioListMorselDeleteButton" aria-label="Remove Option">
<span class="ButtonContent">
<span>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path fill="#5f6368" d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"></path>
<path d="M0 0h24v24H0z" fill="none"></path>
</svg>
</span>
</span>
</div>
</div>
</div>
</div>
<div class="itemHideInactive radioListItemPrimaryContent">
<div class="radioListItemGutter">
<div class="radioListTypeIndicator">
<input type="radio" class="radioItemToggle" aria-checked="false" disabled>
</div>
</div>
<div class="radioListItemGhostItemInput">
<div class="TextInputSimpleInputMainContent">
<div class="TextInputSimpleInputPlaceholder" role="button">
<div class="TextInputSimpleInputContentArea">
<div class="TextInputSimpleInput exportInput optionText">
Add option
</div>
</div>
<div class="TextInputSimpleInputUnderline exportUnderline"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
推荐阅读
- php - 如何在 symfony 5 中加入两个表?
- php - 如何在 WordPress 自定义插件中重定向到外部站点?
- python - 在计算字符串中的字符数时忽略空格
- sql - 计算PostgreSQL中匹配条件的行的时间差
- android - ViewPager2 PagedList DiffUtil FragmentStateAdapter 中的片段重新创建时数据未刷新
- azure - AuthorizeForScopesAttribute 的内联等效项
- ruby-on-rails - nio4r gem 无法使用本机扩展构建(尝试安装 redmine_knowledgebase 插件)
- webpack - Karma Webpack - 每次都重新编译(真的)
- java - 通过过滤从多个表中选择数据
- delphi - 在 Rave 5/Delphi 7 中安装 ND_JPEG 组件时出现问题