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

【问题标题】：Bootstrap colorpicker basic example does not work引导颜色选择器基本示例不起作用
【发布时间】：2018-08-15 11:14:12
【问题描述】：

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

它使用 bootstrap 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>

【问题讨论】：

标签： jquery html css twitter-bootstrap

【解决方案1】：

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

从 CDN 加载 jQuery 时出现问题。

Chrome 返回错误：

加载资源失败：服务器响应状态为 404。

所以我重新添加了 CDN，一切正常。

【讨论】：

【解决方案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>

【讨论】：

【解决方案3】：

<!DOCTYPE html>
<html>

<head>
    <title>jQueryUI | Color Picker</title>

    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js">
    </script>
    <script src=
"https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js">
    </script>
    <link href=
"http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/ui-lightness/jquery-ui.css"
        rel="stylesheet" type="text/css" />

    <!-- Include Pre-compiled files from link or
        download the files in your localhost folder -->
    <script src=
"jquery.colorpicker.js">
    </script>
    <link href=
"jquery.colorpicker.css"
        rel="stylesheet" type="text/css" />

    <style>
        
        
    </style>
</head>

<body>
   
    
    <br/>

    <body>
        Pick a color :
        <input type="text" id="my_color_picker">

        <script>
            $(document).ready(function() {
                $(function() {
                    $("#my_color_picker").colorpicker();
                });
            });
        </script>
    </body>
</body>

</html>

注意：- 从https://github.com/vanderlee/colorpicker下载 jquery.colorpicker.js 和 jquery.colorpicker.css 文件

【讨论】：

请在您的代码中添加一些解释。