我有两个按钮,当选择其中之一时,它们会显示和隐藏输入。如果在选择单向按钮时提交表单,则表单将使用事件返回按钮重新加载。如何让事件标签(按钮)在页面重新加载/刷新后仍然处于事件状态?
$(document).ready(function() {
$("label[name='oneway']").on("click", function() {
$(".arrival").hide();
$(".from").removeClass('col-lg-3');
$(".from").addClass('col-lg-4');
$(".to").removeClass('col-lg-3');
$(".to").addClass('col-lg-4');
$(".departure").removeClass('col-lg-3');
$(".departure").addClass('col-lg-4');
$("label[name='return']").removeClass('active');
$(this).addClass('active');
$('#trip').val('0');
});
$("label[name='return']").on("click", function() {
$(".arrival").show();
$(".from").removeClass('col-lg-4');
$(".from").addClass('col-lg-3');
$(".to").removeClass('col-lg-4');
$(".to").addClass('col-lg-3');
$(".departure").removeClass('col-lg-4');
$(".departure").addClass('col-lg-3');
$("label[name='oneway']").removeClass('active');
$(this).addClass('active');
$('#trip').val('1');
});
});
<form method="post" action="">
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label for="oneway" class="btn btn-default " name="oneway">One way</label>
<label for="return" class="btn btn-default active" name="return">Return</label>
</div>
<div class="form-row col-lg-12">
<div class="form-group col-lg-3 from">
<label for="From">From</label>
<input type="text" class="form-control autocomplete" id="from" name="from" placeholder="Departure city" value="">
</div>
<div class="form-group col-lg-3 to">
<label for="To">To</label>
<input type="text" name="to" class="form-control autocomplete" id="to" placeholder="Arrival city" value="">
</div>
<div class="form-group col-lg-3 departure">
<label for="DepartureDate">Departure Date</label>
<div class="input-group date">
<span class="input-group-addon"><i class="fa fa-calendar"></i></span>
<input id="date_added" type="text" name="dd" class="form-control" value="">
</div>
</div>
<div class="form-group col-lg-3 arrival">
<label for="ArrivalDate">Arrival Date</label>
<div class="input-group date">
<span class="input-group-addon"><i class="fa fa-calendar"></i></span>
<input id="date_modified" type="text" name="rd" class="form-control" value="">
</div>
</div>
<div class="form-row col-lg-12">
<button type="submit" name="confirm" class="btn btn-primary btn-lg " id="confirm">Confirm</button>
</div>
</div>
</form>
最佳答案
您可以使用 sessionStorage
或 localStorage
在整个页面重新加载过程中保存按钮的状态。
session 存储:
The
sessionStorage
property accesses a session Storage object for the current origin.sessionStorage
is similar tolocalStorage
; the difference is that while data inlocalStorage
doesn't expire, data insessionStorage
is cleared when the page session ends.
- Opening a page in a new tab or window creates a new session with the value of the top-level browsing context, which differs from how session cookies work.
有关 sessionStorage
的更多信息,请参见此处 developer.mozilla.org/Window/sessionStorage
本地存储:
The read-only
localStorage
property allows you to access a Storage object for the Document's origin; the stored data is saved across browser sessions.localStorage
is similar tosessionStorage
, except that while data stored inlocalStorage
has no expiration time, data stored insessionStorage
gets cleared when the page session ends — that is, when the page is closed.
It should be noted that data stored in either
localStorage
orsessionStorage
is specific to the protocol of the page.The keys and the values are always strings (note that, as with objects, integer keys will be automatically converted to strings).
有关 localStorage
的更多信息:developer.mozilla.org/Window/localStorage
这是代码示例:
$("label[name='oneway']").on("click", function(){
sessionStorage.setItem("btnActive", "oneway");
....
});
$("label[name='return']").on("click", function(){
sessionStorage.setItem("btnActive", "return");
});
let sessionState = sessionStorage.getItem("btnActive");
if( sessionState !== null ) {
if( sessionState == "oneway" ) {
...
} else {
...
}
} else {
...
}
或使用localStorage
:
// set
localStorage.setItem("btnActive", "oneway");
// get
localStorage.getItem("btnActive");
关于javascript - 如何在页面刷新后保持按钮处于事件状态?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59257016/