个人中心
gpt4 book ai didi

页面刷新时 JavaScript 意外显示/隐藏行为

转载 作者：行者123 更新时间：2023-12-01 00:02:47 24 4
gpt4 key购买 nike

我有一个带有 3 个单选按钮(创建、更新和抑制)的网页，以及带有输入字段和下拉选择器的表单。用户可见的表单输入字段和下拉选择器是动态的，具体取决于选择的单选按钮。当我刷新页面时，我当前的代码表现出意外的行为。

当我第一次浏览到调试页面时，所有 3 个单选按钮的 View 都​​符合预期，只要删除下拉列表 (deleteid) 被隐藏在 View 中除“抑制” View 外的所有 View 中。但是，如果我在浏览器中单击“刷新”，它将返回到“创建”单选按钮(这是预期的)，但删除下拉列表突然出现在“创建”页面上。重复刷新会表现出相同的行为，并且删除下拉选择器继续出现在“创建”页面上。为什么会发生这种情况？

这是代码:

document.addEventListener('DOMContentLoaded', function() {

  $(document).ready(function() {
    $('.js-example-basic-single').select2();
  });

  // Hide show inputs
  $('input[type=radio][name=group]').change(function() {
    if (this.value == 'create') {
      $('#proid').hide();
      $('#deleteid').hide();
      $('.fields').show();
    } else if (this.value == 'update') {
      $('#proid').show();
      $('#deleteid').hide();
      $('#btnSearch').show();
      $('.fields').show();
    } else if (this.value == 'suppress') {
      $('#proid').show();
      $('#deleteid').show();
      $('#btnSearch').hide();
      $('.fields').hide();
    }
  });

});
<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" type="text/css" href="css/style.css">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css">
  <link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/css/select2.min.css" rel="stylesheet" />
</head>

<body class="body-custom">
  <div class="container">
    <div class="form">
      <div class="row">
        <form id="form" action="">
          <div class="row">
            <div class="type">
              <label>
                                    <input class="with-gap" name="group" value="create" type="radio" checked />
                                    <span>Create</span>
                                </label>
              <label>
                                    <input class="with-gap" name="group" value="update" type="radio" />
                                    <span>Update</span>
                                </label>
              <label>
                                    <input class="with-gap" name="group" value="suppress" type="radio" />
                                    <span>Suppress</span>
                                </label>
            </div>
          </div>
          <div id="proid" class="row">
            <div class="input-field col s11">
              <input id="profile_id" type="text" class="validate">
              <label for="profile_id">Profile ID</label>
            </div>
            <div class="input-field col s1">
              <a id="btnSearch" class="btn-floating btn-small waves-effect waves-light teal lighten-2"><i class="material-icons">search</i></a>
            </div>
          </div>
          <!-- Delete Reason -->
          <div id="deleteid" class="row">
            <div class="input-field col s12">
              <select class="js-example-basic-single" name="deletereason" id="deletereason">
                <option value="" disabled selected>Choose delete reason</option>
                <option value="1">Reason 1</option>
                <option value="2">Reason 2</option>
                <option value="3">Reason 3</option>
              </select>
            </div>
          </div>
          <div class="row fields">
            <div class="input-field col s12">
              <input id="name" name="name" type="text" class="validate">
              <label for="name">Name</label>
            </div>
          </div>
          <div class="row">
            <button class="btn waves-effect waves-light" type="submit" name="action">
                                Submit
                                <i class="material-icons right">send</i>
                            </button>
          </div>
        </form>
      </div>
    </div>
  </div>


  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.min.js"></script>
  <script src="js/script.js"></script>

</body>

</html>

编辑 1: 我还应该强调，如果我切换到“更新” View ，然后切换回“创建” View ，则删除下拉列表将不再位于“创建” View 上。但一旦我点击刷新，它就回来了

最佳答案

试试这个。

当您有 $(document).ready(function () { 时，根本不需要删除 document.addEventListener('DOMContentLoaded', function () { - 移动其中的所有函数

const checkRads  = () => {
  const checked  = $('input[type=radio][name=group]:checked').val();  
  const create   = checked === 'create';
  const update   = checked === 'update';
  const suppress = checked === 'suppress';
  $('#proid').toggle(!create);
  $('#deleteid').toggle(suppress);
  $('.fields').toggle(!suppress);
  $('#btnSearch').toggle(update);
}; 
$(function() {
  $('.js-example-basic-single').select2();
  // Hide show inputs
  $('input[type=radio][name=group]').on('change',checkRads);
  checkRads();
});
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/css/select2.min.css" rel="stylesheet" />

<body class="body-custom">
  <div class="container">
    <div class="form">
      <div class="row">
        <form id="form" action="">
          <div class="row">
            <div class="type">
              <label>
                                <input class="with-gap" name="group" value="create" type="radio" checked />
                                <span>Create</span>
                            </label>
              <label>
                                <input class="with-gap" name="group" value="update" type="radio" />
                                <span>Update</span>
                            </label>
              <label>
                                <input class="with-gap" name="group" value="suppress" type="radio" />
                                <span>Suppress</span>
                            </label>
            </div>
          </div>
          <div id="proid" class="row">
            <div class="input-field col s11">
              <input id="profile_id" type="text" class="validate">
              <label for="profile_id">Profile ID</label>
            </div>
            <div class="input-field col s1">
              <a id="btnSearch" class="btn-floating btn-small waves-effect waves-light teal lighten-2"><i class="material-icons">search</i></a>
            </div>
          </div>
          <!-- Delete Reason -->
          <div id="deleteid" class="row">
            <div class="input-field col s12">
              <select class="js-example-basic-single" name="deletereason" id="deletereason">
                <option value="" disabled selected>Choose delete reason</option>
                <option value="1">Reason 1</option>
                <option value="2">Reason 2</option>
                <option value="3">Reason 3</option>
              </select>
            </div>
          </div>
          <div class="row fields">
            <div class="input-field col s12">
              <input id="name" name="name" type="text" class="validate">
              <label for="name">Name</label>
            </div>
          </div>
          <div class="row">
            <button class="btn waves-effect waves-light" type="submit" name="action">
                            Submit
                            <i class="material-icons right">send</i>
                        </button>
          </div>
        </form>
      </div>
    </div>
  </div>


  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.min.js"></script>

关于页面刷新时 JavaScript 意外显示/隐藏行为，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60605603/

24 4 0
文章推荐： vb.net - 防止控制台返回
文章推荐： python - Opsgenie powershell 警报帖子不起作用
文章推荐： .net - 使用对象作为字典键
文章推荐： python - 无法协调 PVLIB 输出与 NREL SAM
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com