英文:
Clear fields when closing div
问题
为了打开和关闭 <div>，我使用了以下代码：
$('#addvisit').on('click', function(e) {
e.stopImmediatePropagation();
$('#fechvisit').slideToggle('slow');
});
在这段代码中，点击 #addvisit 按钮会触发 <div> 的打开和关闭动画效果。但是，您提到的问题是：
如果您打开 <div> 并在选择框或输入框中输入值，然后再次关闭 <div>，字段不会被清除。您希望每次关闭 <div> 时都能清除字段。
您需要添加一些额外的代码来实现在关闭 <div> 时清除字段的功能。这里是一个可能的解决方法：
$('#addvisit').on('click', function(e) {
e.stopImmediatePropagation();
$('#fechvisit').slideToggle('slow', function() {
if (!$(this).is(':visible')) {
// 清除选择框和输入框的值
$('#titl').val('');
$('#contac').val('');
}
});
});
这段代码在关闭 <div> 时检查它是否不可见，并清除了选择框 (#titl) 和输入框 (#contac) 的值。这样，每次关闭 <div> 时，字段都会被清除。
英文:
To open and close div I used the following code:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
$('#addvisit').on('click', function(e) {
e.stopImmediatePropagation();
$('#fechvisit').slideToggle('slow');
});
<!-- language: lang-html -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" id="addvisit" class="hs-button primary large">Adicionar Visitante</button>
<div id="fechvisit" style="display: none;">
<div class="row">
<div class="col-xs-12">
<div class="form-group">
<label for="titl"> <strong>NOME VISITANTE</strong></label>
<select class="js-states form-control" name="titl" id="titl">
<option></option>
<option value="teste">teste</option>
<option value="teste1">teste1</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-6">
<div class="form-group">
<label for="contac"> <strong>CONTACTO VISITANTE</strong></label>
<input type="text" name="contac" class="form-control" id="contac">
</div>
</div>
</div>
</div>
<!-- end snippet -->
The problem I have is the following:
If you open the div and place values in the select or input, if you close the div again, the fields are not cleared. I intended that whenever I closed the div, it would clear the fields.
Can you help?
答案1
得分: 1
你可以在 slideToggle() 上编写一个回调函数，并使用 :visible 选择器 检查点击的元素是否可见。如果不可见，然后清除所选的值。
$('#addvisit').on('click', function(e) {
e.stopImmediatePropagation();
$('#fechvisit').slideToggle('slow', function() {
if (!$(this).is(':visible')) {
$("#titl, #contac").val("");
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" id="addvisit" class="hs-button primary large">Adicionar Visitante</button>
<div id="fechvisit" style="display: none;">
<div class="row">
<div class="col-xs-12">
<div class="form-group">
<label for="titl"><strong>NOME VISITANTE</strong></label>
<select class="js-states form-control" name="titl" id="titl">
<option></option>
<option value="teste">teste</option>
<option value="teste1">teste1</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-6">
<div class="form-group">
<label for="contac"><strong>CONTACTO VISITANTE</strong></label>
<input type="text" name="contac" class="form-control" id="contac">
</div>
</div>
</div>
</div>
英文:
You can write a callback function on slideToggle() and check whether the clicked element is visible or not with :visible Selector . If not visible, then clear the selected value.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
$('#addvisit').on('click', function(e) {
e.stopImmediatePropagation();
$('#fechvisit').slideToggle('slow', function() {
if (!$(this).is(':visible')) {
$("#titl, #contac").val("");
}
});
});
<!-- language: lang-html -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" id="addvisit" class="hs-button primary large">Adicionar Visitante</button>
<div id="fechvisit" style="display: none;">
<div class="row">
<div class="col-xs-12">
<div class="form-group">
<label for="titl"> <strong>NOME VISITANTE</strong></label>
<select class="js-states form-control" name="titl" id="titl">
<option></option>
<option value="teste">teste</option>
<option value="teste1">teste1</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-6">
<div class="form-group">
<label for="contac"> <strong>CONTACTO VISITANTE</strong></label>
<input type="text" name="contac" class="form-control" id="contac">
</div>
</div>
</div>
</div>
<!-- end snippet -->
答案2
得分: 1
你需要检测 div 是否打开或关闭，然后将输入字段的值设置为空。
$('#addvisit').on('click', function(e) {
e.stopImmediatePropagation();
$('#fechvisit').slideToggle('slow', function() {
if (!$(this).is(":visible")) {
$('#contac, #titl').val('');
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" id="addvisit" class="hs-button primary large">Adicionar Visitante</button>
<div id="fechvisit" style="display: none;">
<div class="row">
<div class="col-xs-12">
<div class="form-group">
<label for="titl"> <strong>NOME VISITANTE</strong></label>
<select class="js-states form-control" name="titl" id="titl">
<option></option>
<option value="teste">teste</option>
<option value="teste1">teste1</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-6">
<div class="form-group">
<label for="contac"> <strong>CONTACTO VISITANTE</strong></label>
<input type="text" name="contac" class="form-control" id="contac">
</div>
</div>
</div>
</div>
英文:
You would need to detect if the div is open or closed, and then set the values to of the inputs to nothing.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
$('#addvisit').on('click', function(e) {
e.stopImmediatePropagation();
$('#fechvisit').slideToggle('slow', function() {
if (!$(this).is(":visible")) {
$('#contac, #titl').val('');
}
});
});
<!-- language: lang-html -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" id="addvisit" class="hs-button primary large">Adicionar Visitante</button>
<div id="fechvisit" style="display: none;">
<div class="row">
<div class="col-xs-12">
<div class="form-group">
<label for="titl"> <strong>NOME VISITANTE</strong></label>
<select class="js-states form-control" name="titl" id="titl">
<option></option>
<option value="teste">teste</option>
<option value="teste1">teste1</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-6">
<div class="form-group">
<label for="contac"> <strong>CONTACTO VISITANTE</strong></label>
<input type="text" name="contac" class="form-control" id="contac">
</div>
</div>
</div>
</div>
<!-- end snippet -->
答案3
得分: 1
slideToggle可以具有完成函数，因此我们只需要跟踪打开或关闭的div的状态。当它被打开时，我们可以清除字段。
const fetchVisit = $('#fechvisit');
let isOpen = false;
$('#addvisit').on('click', function(e) {
e.stopImmediatePropagation();
fetchVisit.slideToggle('slow', function(){
isOpen = !isOpen;
if(!isOpen){
// 在打开后清除值
fetchVisit.find('input, select').val('')
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" id="addvisit" class="hs-button primary large">Adicionar Visitante</button>
<div id="fechvisit" style="display: none;">
<div class="row">
<div class="col-xs-12">
<div class="form-group">
<label for="titl"> <strong>NOME VISITANTE</strong></label>
<select class="js-states form-control" name="titl" id="titl">
<option></option>
<option value="teste">teste</option>
<option value="teste1">teste1</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-6">
<div class="form-group">
<label for="contac"> <strong>CONTACTO VISITANTE</strong></label>
<input type="text" name="contac" class="form-control" id="contac">
</div>
</div>
</div>
</div>
英文:
slideToggle can have a completion function, so we just need to track the state of the div being opened or not. When it's opened up, we can just clear out the fields.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
const fetchVisit = $('#fechvisit');
let isOpen = false;
$('#addvisit').on('click', function(e) {
e.stopImmediatePropagation();
fetchVisit.slideToggle('slow', function(){
isOpen = !isOpen;
if(!isOpen){
//clear out the values after opening
fetchVisit.find('input, select').val('')
}
});
});
<!-- language: lang-html -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" id="addvisit" class="hs-button primary large">Adicionar Visitante</button>
<div id="fechvisit" style="display: none;">
<div class="row">
<div class="col-xs-12">
<div class="form-group">
<label for="titl"> <strong>NOME VISITANTE</strong></label>
<select class="js-states form-control" name="titl" id="titl">
<option></option>
<option value="teste">teste</option>
<option value="teste1">teste1</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-6">
<div class="form-group">
<label for="contac"> <strong>CONTACTO VISITANTE</strong></label>
<input type="text" name="contac" class="form-control" id="contac">
</div>
</div>
</div>
</div>
<!-- end snippet -->
答案4
得分: 1
为了在关闭 div 时清除字段，你可以添加一个 function 来在滑动收起 div 之前清除选择和输入字段的值。
$('#addvisit').on('click', function(e) {
e.stopImmediatePropagation();
if (!$('#fechvisit').is(':visible')) {
clearFields();
}
$('#fechvisit').slideToggle('slow');
});
function clearFields() {
$('#titl').val('');
$('#contac').val('');
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" id="addvisit" class="hs-button primary large">Adicionar Visitante</button>
<div id="fechvisit" style="display: none;">
<div class="row">
<div class="col-xs-12">
<div class="form-group">
<label for="titl"><strong>NOME VISITANTE</strong></label>
<select class="js-states form-control" name="titl" id="titl">
<option></option>
<option value="teste">teste</option>
<option value="teste1">teste1</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-6">
<div class="form-group">
<label for="contac"><strong>CONTACTO VISITANTE</strong></label>
<input type="text" name="contac" class="form-control" id="contac">
</div>
</div>
</div>
</div>
英文:
To clear the fields when closing the div, you can add a function to clear the values of the select and input fields before sliding up the div
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
$('#addvisit').on('click', function(e) {
e.stopImmediatePropagation();
if (!$('#fechvisit').is(':visible')) {
clearFields();
}
$('#fechvisit').slideToggle('slow');
});
function clearFields() {
$('#titl').val('');
$('#contac').val('');
}
<!-- language: lang-html -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" id="addvisit" class="hs-button primary large">Adicionar Visitante</button>
<div id="fechvisit" style="display: none;">
<div class="row">
<div class="col-xs-12">
<div class="form-group">
<label for="titl"> <strong>NOME VISITANTE</strong></label>
<select class="js-states form-control" name="titl" id="titl">
<option></option>
<option value="teste">teste</option>
<option value="teste1">teste1</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-6">
<div class="form-group">
<label for="contac"> <strong>CONTACTO VISITANTE</strong></label>
<input type="text" name="contac" class="form-control" id="contac">
</div>
</div>
</div>
</div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论