Home > Net >  How to duplicate an object in a card by a button
How to duplicate an object in a card by a button

Time：10-24

I have a page with multiple MCQ cards and every one should have an option to add another option if necessary but my current function adds this option to all the cards

Here is my fiddle https://jsfiddle.net/abdotamer3/s57jauxw/11/

My function:

$(".TextInputSimpleInputPlaceholder").on("click", function () {
    var clone = $(this).closest(".questionBodyRadioBody").find(".radioListItemPrimaryContent:first").clone(true);
    clone.className = "radioListItemPrimaryContent";
    clone.appendTo(".radioListItemView");
});

My cloning function:

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

CodePudding user response：

Generally you should add scope to your selector:

var $card = $(this).closest('.card');
$clone.appendTo($(".radioListItemView", $card));

Also Option numbering should be per card I think.

$(".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/[email protected]/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>
<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

var numItems = $(".radioListItemPrimaryContent").length;
$(".TextInputSimpleInputPlaceholder").on("click", function () {
    var clone = $(this).closest(".questionBodyRadioBody").find(".radioListItemPrimaryContent:first").clone(true);
    clone.className = "radioListItemPrimaryContent";
    clone.find(".optionText").val("Option "   numItems);
    numItems  ;
    $(this).closest('.questionBodyRadioBody').find(".radioListItemView").append(clone)
});

Is it possible that FE code was written like this like 10 yrs ago? Man, get rid of jQ and switch to React ASAP. This is pain to write, to maintain and to understand

Page link：https//www.codepudding.com/net/164802.html

Prev:React and Django website not loading on Heroku
Next:removeClass on element arrow with using jquery
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding