javascript - 如何让 JQuery 库之间不发生冲突-6ren

javascript - 如何让 JQuery 库之间不发生冲突

转载作者：行者123 更新时间：2023-11-28 12:54:45

我正在尝试在多步骤表单中为日期和时间选择器创建一个下拉菜单。这里的问题是 jQuery 库相互冲突(特别是在 </form> 和 </body> 之间)，当禁用日期和时间选择器库时，多步骤表单起作用，反之亦然。我在网上查了一下，但似乎没有解决问题。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="">
  <meta name="author" content="">

  <link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">

  <link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <!-- jQuery -->

  <!-- Custom styles for this template-->
  <link href="coupons_Example.css" rel="stylesheet">

  <title>Title of the document</title>
</head>

<body>
  <!-- jQuery -->

  <!-- multistep form -->

  <!-- multistep form -->
  <form id="msform">
    <!-- progressbar -->
    <ul id="progressbar">
      <li class="active">Discount Setup</li>
      <li>Type of Discount</li>
      <li>Discount Time Period</li>
    </ul>
    <!-- fieldsets -->
    <fieldset>
      <h2 class="fs-title">Create Discount</h2>
      <h3 class="fs-subtitle">Step 1</h3>
      <input type="text" name="email" placeholder="Name of Discount" />

      <input type="button" name="next" class="next action-button" value="Next" />
    </fieldset>
    <fieldset>
      <h2 class="fs-title">Type of Discount</h2>
      <h3 class="fs-subtitle">Step 2</h3>

      <!-- Picking the date and time -->
      <input type="text" name="datetimes" />

      <input type="button" name="previous" class="previous action-button" value="Previous" />
      <input type="button" name="next" class="next action-button" value="Next" />
    </fieldset>
    <fieldset>
      <h2 class="fs-title">Discount Time Period</h2>
      <h3 class="fs-subtitle">Step 3</h3>
      <input type="text" name="discountstart" placeholder="Discount Start Period" />
      <input type="text" name="discountend" placeholder="Discount End Period" />
      <input type="text" name="speekeasy" placeholder="Speekeasy" />
      <input type="button" name="previous" class="previous action-button" value="Previous" />
      <input type="submit" name="submit" class="submit action-button" value="Submit" />
    </fieldset>

  </form>

  <script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />

  <script src="app.js"></script>

  <script src="http://thecodeplayer.com/uploads/js/jquery-1.9.1.min.js" type="text/javascript"></script>
  <!-- jQuery easing plugin -->
  <script src="http://thecodeplayer.com/uploads/js/jquery.easing.min.js" type="text/javascript"></script>

</body>

</html>