javascript - 如何使用保存按钮保存文本区域值？

Question

我需要一些文本 block 的帮助，这些文本 block 必须能够通过下拉菜单中的选择再次保存和加载。我已经用 JS 试过了，但不知何故它没有成功。怎么办？

我已经用 JS 试过了，但不知何故它没有成功。

var firstTemplate = $('.mail-template').val();
var secondTemplate = $('.mail-template').val();
var thirdTemplate = $('.mail-template').val();

function templateOne(a) {
  a = event || window.event;
  $('.mail-template').val(firstTemplate);
  $('button#template-choice').html("Template 1");
  return true;
}

function templateTwo(b) {
  b = event || window.event;
  $('.mail-template').val(secondTemplate);
  $('button#template-choice').html("Template 2");
  return true;
}

function templateThree(c) {
  c = event || window.event;
  $('.mail-template').val(thirdTemplate);
  $('button#template-choice').html("Template 3");
  return true;
}

function save(s) {
  c = event || window.event;
  if ($('#template>a:first-child').clicked == true) {
    firstTemplate = $('.mail-template').val();
    return true;
  } else if ($('#template>a:nth-child(2)').clicked == true) {
    secondTemplate = $('.mail-template').val();
    return true;
  } else if ($('#template>a:nth-child(3)').clicked == true) {
    thirdTemplate = $('.mail-template').val();
    return true;
  }
}

.bg-text h1 {
  margin-top: 20px;
  font-size: 30px;
}

a.invisible-link {
  color: unset;
  text-decoration: none;
  padding: 0 3px;
}

a.invisible-link:hover {
  color: #788bb6;
}

p.sprachen a.invisible-link:hover {
  color: #fcaf17;
}

.spalte {
  display: inline-block;
}

span.current-language {
  color: #fcaf17;
  padding: 0 3px;
}

p.sprachen {
  font-family: "univers_47", Arial, sans-serif;
  font-size: 20px;
}

button.send-quote {
  text-decoration: underline;
}

input {
  font-family: "univers_47", Arial, sans-serif;
  font-size: 14px !important;
}

input[type="file"] {
  visibility: hidden;
  width: 100px;
  transform: translateY(-20px);
}

label.upload-button {
  /*    background: #788bb6;
    color: #fff;*/
  padding-top: 18px;
  border-radius: 3px;
  position: relative;
  transition: 300ms;
  display: inline-block;
}

img[src*="upload.png"]:hover {
  cursor: pointer;
  transform: translateY(-5px);
  transition: 300ms;
}

img[src*="upload.png"]:not(:hover) {
  transition: 300ms;
}

img[src*="enter.png"]:hover {
  transform: translateX(5px);
  transition: 300ms;
}

img[src*="enter.png"]:not(:hover) {
  transition: 300ms;
}

img[src*="download.png"]:hover {
  cursor: pointer;
  transform: translateY(5px);
  transition: 300ms;
}

img[src*="download.png"]:not(:hover) {
  transition: 300ms;
}

.download:disabled img {
  opacity: 0.7;
}

div.quote-form-content p {
  margin-bottom: 10px;
}

.form textarea.mail-template {
  height: 150px;
  width: 600px;
  border-color: #2c3459;
  border-radius: 3px;
  font-family: "Courier New", serif;
}


/* Dropdown Button */

.dropbtn {
  background-color: #788bb6;
  color: white;
  padding: 10px 15px;
  font-size: 13px;
  cursor: pointer;
  border: none;
  border-radius: 3px;
}


/* Dropdown button on hover & focus
.dropbtn:hover, .dropbtn:focus {
  background-color: #2C3459;
} */


/* The container <div> - needed to position the dropdown content */

.dropdown {
  position: relative;
  display: inline-block;
}


/* Dropdown Content (Hidden by Default) */

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #fff;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}


/* Links inside the dropdown */

.dropdown-content a {
  color: #000;
  padding: 10px 15px;
  text-decoration: none;
  display: block;
  font-size: 13px;
}


/* Change color of dropdown links on hover */

.dropdown-content a:hover {
  background-color: #788bb6;
  color: #fff;
}


/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */

.show {
  display: block;
}


/* Show the dropdown menu on hover */

.dropdown:hover .dropdown-content {
  display: block;
}

label.checkbox {
  font-size: 13px;
  border: none;
}

div.checkboxes {
  margin-top: 15px;
  display: none;
}

h4#kriterium {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h2>Ihr Mail-Template</h2>
<h4>Wählen Sie zunächst Ihre gewünschtes Template aus:</h4>
<div class="dropdown">
  <button onclick="dropdown()" class="dropbtn" id="template-choice">Ihr gewünschtes Template</button>
  <div id="Template" class="dropdown-content">
    <a href="#" onclick="templateOne()">Template 1</a>
    <a href="#" onclick="templateTwo()">Template 2</a>
    <a href="#" onclick="templateThree()">Template 3</a>
  </div>
</div>
<h4>Hier können Sie Ihr Mail-Template konfigurieren.</h4>
<div class="form">
  <textarea name="Mail-Template" class="quote-form-element quote-form-client-email last mail-template" cols="90" rows="20"></textarea>
  <button class="button button-navy-blue send-quote" type="button" onclick="save()">Speichern <i class="fa fa-save"></i></button>

输入的文本下次不会加载，显然也不会保存。那有什么问题呢？

Answer 1

据我了解，您的文本区域未保存。在您的保存功能中，由于您实现了 if，因此您没有获取文本区域数据。我已经评论了该代码及其获取数据和更新字段。我希望这对你有用。

var firstTemplate = $('.mail-template').val();
var secondTemplate = $('.mail-template').val();
var thirdTemplate = $('.mail-template').val();

function templateOne(a) {
  a = event || window.event;
  $('.mail-template').val(firstTemplate);
  $('button#template-choice').html("Template 1");
  return true;
}

function templateTwo(b) {
  b = event || window.event;
  $('.mail-template').val(secondTemplate);
  $('button#template-choice').html("Template 2");
  return true;
}

function templateThree(c) {
  c = event || window.event;
  $('.mail-template').val(thirdTemplate);
  $('button#template-choice').html("Template 3");
  return true;
}

function save(s) {
debugger
  c = event || window.event;
  //if ($('#template>a:first-child').clicked == true) {
    firstTemplate = $('.mail-template').val();
    return true;
  //} else if ($('#template>a:nth-child(2)').clicked == true) {
    //secondTemplate = $('.mail-template').val();
    //return true;
  //} else if ($('#template>a:nth-child(3)').clicked == true) {
    //thirdTemplate = $('.mail-template').val();
    //return true;
  //}
}

.bg-text h1 {
  margin-top: 20px;
  font-size: 30px;
}

a.invisible-link {
  color: unset;
  text-decoration: none;
  padding: 0 3px;
}

a.invisible-link:hover {
  color: #788bb6;
}

p.sprachen a.invisible-link:hover {
  color: #fcaf17;
}

.spalte {
  display: inline-block;
}

span.current-language {
  color: #fcaf17;
  padding: 0 3px;
}

p.sprachen {
  font-family: "univers_47", Arial, sans-serif;
  font-size: 20px;
}

button.send-quote {
  text-decoration: underline;
}

input {
  font-family: "univers_47", Arial, sans-serif;
  font-size: 14px !important;
}

input[type="file"] {
  visibility: hidden;
  width: 100px;
  transform: translateY(-20px);
}

label.upload-button {
  /*    background: #788bb6;
    color: #fff;*/
  padding-top: 18px;
  border-radius: 3px;
  position: relative;
  transition: 300ms;
  display: inline-block;
}

img[src*="upload.png"]:hover {
  cursor: pointer;
  transform: translateY(-5px);
  transition: 300ms;
}

img[src*="upload.png"]:not(:hover) {
  transition: 300ms;
}

img[src*="enter.png"]:hover {
  transform: translateX(5px);
  transition: 300ms;
}

img[src*="enter.png"]:not(:hover) {
  transition: 300ms;
}

img[src*="download.png"]:hover {
  cursor: pointer;
  transform: translateY(5px);
  transition: 300ms;
}

img[src*="download.png"]:not(:hover) {
  transition: 300ms;
}

.download:disabled img {
  opacity: 0.7;
}

div.quote-form-content p {
  margin-bottom: 10px;
}

.form textarea.mail-template {
  height: 150px;
  width: 600px;
  border-color: #2c3459;
  border-radius: 3px;
  font-family: "Courier New", serif;
}


/* Dropdown Button */

.dropbtn {
  background-color: #788bb6;
  color: white;
  padding: 10px 15px;
  font-size: 13px;
  cursor: pointer;
  border: none;
  border-radius: 3px;
}


/* Dropdown button on hover & focus
.dropbtn:hover, .dropbtn:focus {
  background-color: #2C3459;
} */


/* The container <div> - needed to position the dropdown content */

.dropdown {
  position: relative;
  display: inline-block;
}


/* Dropdown Content (Hidden by Default) */

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #fff;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}


/* Links inside the dropdown */

.dropdown-content a {
  color: #000;
  padding: 10px 15px;
  text-decoration: none;
  display: block;
  font-size: 13px;
}


/* Change color of dropdown links on hover */

.dropdown-content a:hover {
  background-color: #788bb6;
  color: #fff;
}


/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */

.show {
  display: block;
}


/* Show the dropdown menu on hover */

.dropdown:hover .dropdown-content {
  display: block;
}

label.checkbox {
  font-size: 13px;
  border: none;
}

div.checkboxes {
  margin-top: 15px;
  display: none;
}

h4#kriterium {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h2>Ihr Mail-Template</h2>
<h4>Wählen Sie zunächst Ihre gewünschtes Template aus:</h4>
<div class="dropdown">
  <button onclick="dropdown()" class="dropbtn" id="template-choice">Ihr gewünschtes Template</button>
  <div id="Template" class="dropdown-content">
    <a href="#" onclick="templateOne()">Template 1</a>
    <a href="#" onclick="templateTwo()">Template 2</a>
    <a href="#" onclick="templateThree()">Template 3</a>
  </div>
</div>
<h4>Hier können Sie Ihr Mail-Template konfigurieren.</h4>
<div class="form">
  <textarea name="Mail-Template" class="quote-form-element quote-form-client-email last mail-template" cols="90" rows="20"></textarea>
  <button class="button button-navy-blue send-quote" type="button" onclick="save()">Speichern <i class="fa fa-save"></i></button>