是否可以将此代码（或转换）与不同的 jQuery 版本一起使用？

Posted 2023-02-18

技术标签:

【中文标题】是否可以将此代码（或转换）与不同的 jQuery 版本一起使用？【英文标题】：Is it possible to use this code (or convert it) with a different jQuery version? 【发布时间】：2021-05-31 20:30:31 【问题描述】：

在我的项目中，我正在使用 jQuery 3.5.1，并且此代码不适用于该版本。我的问题是，是否可以将此代码转换为可用于 jQuery 3.5.1 这可能是一个愚蠢的问题，但我对 jquery 还是很陌生...

<!doctype html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>jQuery UI Autocomplete - Multiple values</title>
      <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
      <link rel="stylesheet" href="/resources/demos/style.css">
      <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
      <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
      <script>
      $( function() 
        var availableTags = [
          "ActionScript",
          "AppleScript",
          "Asp",
          "BASIC",
          "C",
          "C++",
          "Clojure",
          "COBOL",
          "ColdFusion",
          "Erlang",
          "Fortran",
          "Groovy",
          "Haskell",
          "Java",
          "javascript",
          "Lisp",
          "Perl",
          "php",
          "Python",
          "Ruby",
          "Scala",
          "Scheme"
        ];
        function split( val ) 
          return val.split( /,\s*/ );
        
        function extractLast( term ) 
          return split( term ).pop();
        
     
        $( "#tags" )
          // don't navigate away from the field on tab when selecting an item
          .on( "keydown", function( event ) 
            if ( event.keyCode === $.ui.keyCode.TAB &&
                $( this ).autocomplete( "instance" ).menu.active ) 
              event.preventDefault();
            
          )
          .autocomplete(
            minLength: 0,
            source: function( request, response ) 
              // delegate back to autocomplete, but extract the last term
              response( $.ui.autocomplete.filter(
                availableTags, extractLast( request.term ) ) );
            ,
            focus: function() 
              // prevent value inserted on focus
              return false;
            ,
            select: function( event, ui ) 
              var terms = split( this.value );
              // remove the current input
              terms.pop();
              // add the selected item
              terms.push( ui.item.value );
              // add placeholder to get the comma-and-space at the end
              terms.push( "" );
              this.value = terms.join( ", " );
              return false;
            
          );
       );
      </script>
    </head>
    <body>
     
    <div class="ui-widget">
      <label for="tags">Tag programming languages: </label>
      <input id="tags" size="50">
    </div>
     
     
    </body>
    </html>

此代码不是我的，我是从以下地址获得的：https://jqueryui.com/autocomplete/#multiple 我用 3.5.1 制作了一个 JSFiddle，向您展示它给出的错误：https://jsfiddle.net/cm3thL0r/

索引：

<html>
<head>
    <?php
    include "includes/include.php";
    ?>
    <style>
        a 
            /* Styles for anchors without href */
            cursor:pointer;
        
    </style>
    <title>Kenniscentrum</title>

</head>
<body>

<!--    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>-->
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>

        <div class="body">

            <div class="w-75 mx-auto mt-3">

                <?php

                echo "<form method='post' id='backToMain' action=''>";
                echo "</form>";


                echo "<form method='post' id='backToSub'>";
                echo "<input type='hidden' name='rubriek' value='".$_POST['rubriek']."'>";
                echo "</form>";

                    if(isset($_POST['rubriek'] , $_POST['subrubriek']))

                        echo "<a class='text-primary' ";
                        ?>onclick="document.getElementById('backToMain').submit();"<?php
                        echo " >Rubrieken > </a>";


                        echo "<a class='text-primary' ";
                        ?>onclick="document.getElementById('backToSub').submit();"<?php
                        echo " >Sub-Rubrieken > </a>"; echo "Artikel";

                    
                    else if(isset($_POST['rubriek']))
                        echo "<a class='text-primary' ";
                        ?>onclick="document.getElementById('backToMain').submit();"<?php
                        echo " >Rubrieken > </a> Sub-Rubrieken";
                    
                    else if(!isset($_POST['subrubriek']))
                        echo 'Rubrieken';
                    
                ?><button class="btn btn-success float-right mr-3" data-bs-toggle="modal" data-bs-target="#modalCreate">Nieuw</button>
            </div>

            <table id="example" class="mt-3 w-75 table table-striped table-bordered mx-auto">

                <th>Naam</th>
                <?php
                    if(isset($_POST['rubriek'] , $_POST['subrubriek']))
                        getAllArtikel();
                    
                    else if(isset($_POST['rubriek']))
                        getAllSubRubriek();
                    
                    else if(!isset($_POST['subrubriek']))
                        getAllRubriek();
                    
                ?>

            </table>
        </div>

        <?php
        include "includes/Modals/modal.php";
        include "includes/Modals/modalEdit.php";
        include "includes/Modals/modalEditRubriek.php";
        include "includes/Modals/modalEditSubrubriek.php";
        include "includes/Modals/modalDelete.php";
        include "includes/Modals/modalDeleteRubriek.php";
        include "includes/Modals/modalDeleteSubrubriek.php";
        include "includes/Modals/modalCreate.php";
        ?>

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

    </body>
</html>

包括：

    <?php
include "dbconn.php";
include "phpFunctions.php";
?>

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>


<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
      integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
        integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
        crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
        integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
        crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
        integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
        crossorigin="anonymous"></script>

有些部分可能是荷兰人对此感到抱歉....

【问题讨论】：

可以 @SimoneRossaini 怎么做？简单，您需要查看哪个错误或已弃用的函数有您的代码并使用新的。 @SimoneRossaini 它说：Uncaught TypeError: $(...).on(...).autocomplete is not a function 【参考方案1】：

您可以看到所有使用 jquery 3.5 的工作，我只需将 <script src="https://code.jquery.com/jquery-1.12.4.js"></script> 更改为 3.5 的 cdn

$( function() 
        var availableTags = [
          "ActionScript",
          "AppleScript",
          "Asp",
          "BASIC",
          "C",
          "C++",
          "Clojure",
          "COBOL",
          "ColdFusion",
          "Erlang",
          "Fortran",
          "Groovy",
          "Haskell",
          "Java",
          "JavaScript",
          "Lisp",
          "Perl",
          "PHP",
          "Python",
          "Ruby",
          "Scala",
          "Scheme"
        ];
        function split( val ) 
          return val.split( /,\s*/ );
        
        function extractLast( term ) 
          return split( term ).pop();
        
     
        $( "#tags" )
          // don't navigate away from the field on tab when selecting an item
          .on( "keydown", function( event ) 
            if ( event.keyCode === $.ui.keyCode.TAB &&
                $( this ).autocomplete( "instance" ).menu.active ) 
              event.preventDefault();
            
          )
          .autocomplete(
            minLength: 0,
            source: function( request, response ) 
              // delegate back to autocomplete, but extract the last term
              response( $.ui.autocomplete.filter(
                availableTags, extractLast( request.term ) ) );
            ,
            focus: function() 
              // prevent value inserted on focus
              return false;
            ,
            select: function( event, ui ) 
              var terms = split( this.value );
              // remove the current input
              terms.pop();
              // add the selected item
              terms.push( ui.item.value );
              // add placeholder to get the comma-and-space at the end
              terms.push( "" );
              this.value = terms.join( ", " );
              return false;
            
          );
       );

<!doctype html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>jQuery UI Autocomplete - Multiple values</title>
      <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
      <link rel="stylesheet" href="/resources/demos/style.css">
      <script
      src="https://code.jquery.com/jquery-3.5.1.js"
      integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc="
      crossorigin="anonymous"></script>
      <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    </head>
    <body>
     
    <div class="ui-widget">
      <label for="tags">Tag programming languages: </label>
      <input id="tags" size="50">
    </div>
     
     
    </body>
    </html>

【讨论】：

我看到它有效，但你到底做了什么？ 正如你所看到的所有使用 jquery 3.5 的工作，我只是将 我写了它我知道但是3.5的cdn是什么？是不是版本不同？唯一的区别是它在服务器上好的，谢谢，在我的项目中包含它仍然存在问题，但我会尝试解决。

以上是关于是否可以将此代码（或转换）与不同的 jQuery 版本一起使用？的主要内容，如果未能解决你的问题，请参考以下文章

有啥方法可以将此字符串：“Coordenação”转换为：javascript/jquery 中的“Coordenação”？

将此自定义 JQuery 工具提示脚本转换为 Jquery 插件

如何将此代码转换为准备好的语句或 jdbc 中的语句？ [关闭]

jQuery学习笔记--jQuery对象与DOM对象相互转换

是否可以将此循环转换为python中的列表理解

ASP 专家 - 需要帮助将此 PHP 代码转换为 ASP