如何使用保存按钮保存 textarea 值？

Question

我需要一些文本块的帮助，这些文本块必须能够通过下拉菜单中的选择再次保存和加载。 我已经用 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>