设计了可折叠选项卡并实现了字形符号，以实现内联功能。当用户单击铅笔时，它将变成用于保存数据的软盘，而另一个是重复的glyphicon，原因是当用户不填写数据时，表格应进入页面的先前状态，如后退按钮。在这里进行数据保存，保存后变成铅笔状态。但是，当我单击重复glyphicon时，它并没有返回到页面的先前状态。该表单已通过document.getElementById进行了验证，因此如果我单击“重复”，也会进行验证。编辑了代码。请至少有人给我一个例子，说明如何使onclick页面的先前状态。我是初学者，我尝试过一些事情，请帮助我
$(document)
.ready(
function() {
$('.editAddBtn') //class called from html
.click(
function() {
//used to make textbox readonly
//checks if it is already on readonly mode
if ($('.editField').is('[readonly]')) {
//turns the readonly off
$('.editField').prop('readonly', false);
//used to make textarea readonly
$('.mySelect').prop('disabled', false);
// used to make checkbox disabled
$('#chk').prop('disabled', false);
//shown pencil floppy and repeat glyphicon for onclick
$('.editAddBtn')
.html(
'<span class="glyphicon glyphicon-floppy-disk"> </span>' +
'<span class="glyphicon glyphicon-repeat" id="reBtn"> </span>'
); //Changes the text of the button
$("#repeatBtn").click(function() { // used to make back state of the form
$(this).prev().removeAttr("onclick");
$(this).prev().off("click");
$(this).prev().on("click", function() {});
});
} else { //else we do other things
<!-- this is used for form validation-->
//Form validation
var cstreet_1 = document
.getElementById('currentAddressLine1').value;
if (cstreet_1 == "") {
document.getElementById('currentAddressLine1')
.style.borderColor = "red";
//return false;
} else {
document.getElementById('currentAddressLine1')
.style.borderColor = "#cccccc";
}
// saveAddress(); //function is used for save the data
//readonly after filling the data into the textbox t
$('.editField').prop('readonly', true);
//readonly after filling the data into the textbox t
$('.mySelect').prop('disabled', true);
//readonly after filling the data into the checkbox
$('#chk').prop('disabled', true);
//after saving the data floppy disk turn into the pencil means normal state
$('.editAddBtn').html(
'<span class="glyphicon glyphicon-pencil"> </span>'
);
}
});
});<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet">
<!-- Theme CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="css/style.css" rel="stylesheet">
<link href="css/datepicker.min.css" rel="stylesheet">
<!-- Favicon -->
<link rel="shortcut icon" href="img/favicon.ico">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="row">
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-heading" style="background-color: #b3daff;">
<h4 class="panel-title">
<span style="font-weight: 700;">Addre</span>
<a class="editAddBtn"><span
class="glyphicon glyphicon-pencil"> </span></a>
<a data-toggle="collapse" data-parent="#accordion" href="#collapseThree"> <span class="glyphicon glyphicon-plus" id="pls" style="color: darkred"> </span>
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
<div class="col-sm-4 col-md-12">
<div class="row">
<div class="form-group">
<label class="control-label col-sm-12 col-md-8">Current
</label>
</div>
</div>
</div>
<!-- Address line 1 -->
<div class="col-md-12">
<div class="row">
<div class="form-group">
<label class="control-label col-md-3" style="padding-top: 1px;">Address<span
style="color: red;">*</span></label>
<div class="col-md-9">
<input type="text" class="form-control editField" id="currentAddressLine1" readonly placeholder="Address Line 1" style='text-transform: capitalize' />
</div>
</div>
</div>
<br />
</div>
<!--end tag for address line 1 -->
</div>
</div>
</div>
</div>
</div>
<!-- begin snippet: js hide: false console: true babel: false -->
答案 0 :(得分：0)
尝试此代码。虽然我已经评论了saveAddress（）;方法。取消注释后再使用。
$(document).ready(
function() {
$('.editAddBtn').click(function() {
if ($('.editField').is('[readonly]')) {
$('.editField').prop('readonly', false);
$('.mySelect').prop('disabled', false);
$('#chk').prop('disabled', false);
$('.editAddBtn').html('<span class="glyphicon glyphicon-floppy-disk"> </span>' + '<span class="glyphicon glyphicon-repeat" id="reBtn"> </span>');
// $('.editAddBtn span').toggleClass('glyphicon glyphicon-floppy-disk');
$(document).on('click', "#repeatBtn",function() {
$(this).prev().removeAttr("onclick");
$(this).prev().off("click");
$('.editAddBtn').html('<span class="glyphicon glyphicon-pencil"> </span>');
});
} else {
var cstreet_1 = document
.getElementById('currentAddressLine1').value;
if (cstreet_1 == "") {
document.getElementById('currentAddressLine1').style.borderColor = "red";
//return false;
} else {
document.getElementById('currentAddressLine1').style.borderColor = "#cccccc";
}
// saveAddress(); //function is used for save the data
$('.editField').prop( //readonly after filling the data into the textbox t
'readonly', true);
$('.mySelect').prop( //readonly after filling the data into the textbox t
'disabled', true);
$('#chk').prop('disabled', true);
$('.editAddBtn').html('<span class="glyphicon glyphicon-pencil"> </span>');
}
});
}); <link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="row">
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-heading" style="background-color: #b3daff;">
<h4 class="panel-title">
<span style="font-weight: 700;">Addres</span>
<a class="editAddBtn"><span class="glyphicon glyphicon-pencil"> </span></a>
<a data-toggle="collapse" data-parent="#accordion" href="#collapseThree"><span class="glyphicon glyphicon-plus" id="pls" style="color: darkred"> </span> </a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
<div class="col-sm-4 col-md-12">
<div class="row">
<div class="form-group">
<label class="control-label col-sm-12 col-md-8">
Current
</label>
</div>
</div>
</div>
<!-- Address line 1 -->
<div class="col-md-12">
<div class="row">
<div class="form-group">
<label class="control-label col-md-3"
style="padding-top: 1px;">
Address<span
style="color: red;">*</span></label>
<div class="col-md-9">
<input type="text" class="form-control editField"
id="currentAddressLine1" readonly
placeholder="Address Line 1"
style='text-transform: capitalize' />
</div>
</div>
</div>
<br />
</div>
</div>
</div>
</div>
</div>
</div>