Question

我想使用颜色选择器插件进行引导：https://farbelous.io/bootstrap-colorpicker/index.html

它使用引导程序4和Jquery

尝试由开发人员在我的网站或JS Fiddle中发布的非常基本的代码示例时，颜色选择器无法正常工作（您应该在左侧看到一个可单击的正方形，并且可以使用它）

我做错了什么？我以为可能是导入无效，所以我使用了CDN，但没有任何改变

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-colorpicker/2.5.3/css/bootstrap-colorpicker.css" rel="stylesheet">
</head>
<body>
  <div class="jumbotron">
      <h1>Bootstrap Colorpicker Demo</h1>
      <input id="demo" type="text" class="form-control" value="rgb(255, 128, 0)" />
  </div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-colorpicker/2.5.3/js/bootstrap-colorpicker.js"></script>
  <script>
    $(function () {
      // Basic instantiation:
      $('#demo').colorpicker();

      // Example using an event, to change the color of the .jumbotron background:
      $('#demo').on('colorpickerChange', function(event) {
        $('.jumbotron').css('background-color', event.color.toString());
      });
    });
  </script>
</body>

Answer 1

这是您代码的固定版本：Fixed version.

从CDN加载jQuery时出现问题。

Chrome返回错误：

无法加载资源：服务器的响应状态为404。

因此，我重新添加了CDN，一切正常。

Answer 2

我认为您犯了一个小错误。请转到您的jquery-3.3.1.slim.min.js-链接不正确。将您的jquery-3.3.1.slim.min.js链接替换为以下内容：

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.slim.min.js'></script>

引导色选择器基本示例不起作用

2 个答案: