如何在intellij中正确使用带有jquery的<svg>标签？

Question

所以这里我有 JQuery 和 jsbarcode 的 CDN -> jsbarcode info https://lindell.me/JsBarcode/ 输出应显示 const "number" var 的条形码。

  

    <!DOCTYPE html>
     <html lang="en" xmlns:th="http://www.thymeleaf.org"  >

    </head>
    <body >
  
    </div>

         <script>
            const number = '12345678';
            $(document).ready(function(){
                JsBarcode("#barcode", number, {
                    text: number.match(/.{1,4}/g).join("  "),
                    width: 2,
                    height: 50,
                    fontSize: 15,
                });
            });
        </script>

        <svg id="barcode"></svg>



    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/jsbarcode/3.6.0/JsBarcode.all.min.js"></script>



    </body>



</html>

Answer 1

您需要在使用它们的代码之前为您的库添加脚本标签。他们可以进入<head> 标签。您的代码 sn-p 变为以下内容：

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/jsbarcode/3.6.0/JsBarcode.all.min.js"></script>
</head>

<body>
<script>
  const number = '12345678';
  $(document).ready(function(){
      JsBarcode("#barcode", number, {
          text: number.match(/.{1,4}/g).join("  "),
          width: 2,
          height: 50,
          fontSize: 15,
      });
  });
</script>
<svg id="barcode"></svg>
</body>
</html>

（在我提供的代码 sn-p 中，我还清理了 HTML 中的一些错误，例如 </div> 中不存在的 div 标签。）