关闭 div 时清除字段-解网

问：

为了打开和关闭 div，我使用了以下代码：

$('#addvisit').on('click', function(e) {
    e.stopImmediatePropagation();
  $('#fechvisit').slideToggle('slow');
});

<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>

我遇到的问题如下：

如果打开 div 并将值放在选择或输入中，则如果再次关闭 div，则不会清除这些字段。我打算每当我关闭 div 时，它都会清除字段。

你能帮忙吗？

JavaScript HTML jQuery 函数

答：

1赞 Kiran Shahi 7/12/2023 #1

您可以在 slideToggle（） 上编写一个回调函数，并使用 ：visible Selector 检查单击的元素是否可见。如果不可见，则清除所选值。

$('#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>

1赞 j08691 7/12/2023 #2

您需要检测 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>

1赞 Chris Barr 7/12/2023 #3

slideToggle可以有一个完成函数，所以我们只需要跟踪 div 被打开或不打开的状态。当它开放时，我们可以清理出田地。

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('')
    }
  });
});

<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>

1赞 XM01 - stands with Palestine 7/12/2023 #4

要在关闭 div 时清除字段，您可以在向上滑动 div 之前添加 a 以清除选择和输入字段的值function

$('#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>

上一个：如何自定义 Fullcalendar

下一个：打印使用 FullCalendar 创建的日历

关闭 div 时清除字段

Clear fields when closing div

评论