Javascript Laravel颜色选择器不工作

我想在我的表单中使用颜色选择器，我在我的项目中尝试了以下代码，但它不起作用。密码有问题吗

鉴于刀片

  @extends('layouts.blank')

@push('stylesheets')
<link   href="https://maxcdn.bootstrapcdn.com/bootstrap
/3.3.6/css/bootstrap.min.css" rel="stylesheet">
 <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-
colorpicker/2.5.1/css/bootstrap-colorpicker.min.css" rel="stylesheet">

 @endpush

 @section('main_container')
<div class="main-content">

<!-- page content -->
  <div id="page-wrapper">
    <div class="tab-pane active" id="horizontal-form">

   <h3 class="blank1">Vehicle Details</h3>

            {!! Form::open(array('class' => 'form-horizontal','route' => 
          'vehicles.store','method'=>'POST')) !!}
 <script type="text/javascript">
  $('.colorpicker').colorpicker();

 </script>
 <div class="row">
 <div id="cp2" class="input-group colorpicker colorpicker-component"> 

   <input type="text" value="#00AABB" class="form-control" /> 

  <span class="input-group-addon"><i></i></span> 

 </div>
  <div class="row">
   <div class="form-group">
  <div class="col-md-6">
   <div class="col-xs-12 col-sm-12 col-md-12 text-center">
            <button type="submit" class="btn btn-primary">Submit</button>
    </div>
    </div>
    </div>
    </div>

  {{ Form::close() }}

 </div>
 </div>
    </div>
    </div>
    @endsection
    @pushonce('custom-scripts')

    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-
colorpicker/2.5.1/js/bootstrap-colorpicker.min.js"></script>

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js">
 </script>
  @endpushonce

@extends（'layouts.blank'）
@推送（'样式表'）
@端推
@节（“主容器”）
车辆详情
{！！Form:：open（数组（'class'=>'Form horizontal'，'route'=>
‘vehicles.store’，‘method’=>‘POST’）
$（'.colorpicker'）.colorpicker（）；
提交
{{Form:：close（）}}
@端部
@pushonce（“自定义脚本”）
@结束一次

我得到一个没有显示颜色的空文本框。包含css或js文件有问题吗。 我怎样才能解决这个问题？有人能帮忙吗？

像这样做

<div class="main-content">

<!-- page content -->
  <div id="page-wrapper">
    <div class="tab-pane active" id="horizontal-form">

   <h3 class="blank1">Vehicle Details</h3>

            {!! Form::open(array('class' => 'form-horizontal','route' => 
          'vehicles.store','method'=>'POST')) !!}
 <script type="text/javascript">
  $('#cp2').colorpicker();

 </script>
 <div class="row">
 <div id="cp2" class="input-group  colorpicker-component"> 

   <input type="text" value="#00AABB" class="colorpicker form-control" /> 

  <span class="input-group-addon"><i></i></span> 

 </div>
  <div class="row">
   <div class="form-group">
  <div class="col-md-6">
   <div class="col-xs-12 col-sm-12 col-md-12 text-center">
            <button type="submit" class="btn btn-primary">Submit</button>
    </div>
    </div>
    </div>
    </div>

  {{ Form::close() }}

 </div>
 </div>
    </div>
    </div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js">
 </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-
colorpicker/2.5.1/js/bootstrap-colorpicker.min.js"></script>

车辆详情
{！！Form:：open（数组（'class'=>'Form horizontal'，'route'=>
‘vehicles.store’，‘method’=>‘POST’）
$（'#cp2'）.colorpicker（）；
提交
{{Form:：close（）}}

像这样做

<div class="main-content">

<!-- page content -->
  <div id="page-wrapper">
    <div class="tab-pane active" id="horizontal-form">

   <h3 class="blank1">Vehicle Details</h3>

            {!! Form::open(array('class' => 'form-horizontal','route' => 
          'vehicles.store','method'=>'POST')) !!}
 <script type="text/javascript">
  $('#cp2').colorpicker();

 </script>
 <div class="row">
 <div id="cp2" class="input-group  colorpicker-component"> 

   <input type="text" value="#00AABB" class="colorpicker form-control" /> 

  <span class="input-group-addon"><i></i></span> 

 </div>
  <div class="row">
   <div class="form-group">
  <div class="col-md-6">
   <div class="col-xs-12 col-sm-12 col-md-12 text-center">
            <button type="submit" class="btn btn-primary">Submit</button>
    </div>
    </div>
    </div>
    </div>

  {{ Form::close() }}

 </div>
 </div>
    </div>
    </div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js">
 </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-
colorpicker/2.5.1/js/bootstrap-colorpicker.min.js"></script>

车辆详情
{！！Form:：open（数组（'class'=>'Form horizontal'，'route'=>
‘vehicles.store’，‘method’=>‘POST’）
$（'#cp2'）.colorpicker（）；
提交
{{Form:：close（）}}

我通过@yield scripts使用了脚本，然后它工作了。

我通过@yield scripts使用了脚本，然后它工作了。

你可以试试这个，它工作得很好

   <html lang="en">
    <head>
        <title>Bootstrap Color Picker Plugin Example</title>
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
        <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-colorpicker/2.3.6/css/bootstrap-colorpicker.css" rel="stylesheet">
        <script src="https://code.jquery.com/jquery-2.2.2.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-colorpicker/2.3.6/js/bootstrap-colorpicker.js"></script>
    </head>
    <body>
    <div class="container">
        <h1>Bootstrap Color Picker Plugin Example</h1> 
        <div id="cp2" class="input-group colorpicker-component"> 
          <input type="text" value="#00AABB" class="form-control" /> 
          <span class="input-group-addon"><i></i></span>
        </div>
    </div>
    <script type="text/javascript">
    $('#cp2').colorpicker();
    </script>
    </body>
    </html>

引导颜色选择器插件示例
引导颜色选择器插件示例
$（'#cp2'）.colorpicker（）；

你可以试试这个，效果很好

   <html lang="en">
    <head>
        <title>Bootstrap Color Picker Plugin Example</title>
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
        <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-colorpicker/2.3.6/css/bootstrap-colorpicker.css" rel="stylesheet">
        <script src="https://code.jquery.com/jquery-2.2.2.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-colorpicker/2.3.6/js/bootstrap-colorpicker.js"></script>
    </head>
    <body>
    <div class="container">
        <h1>Bootstrap Color Picker Plugin Example</h1> 
        <div id="cp2" class="input-group colorpicker-component"> 
          <input type="text" value="#00AABB" class="form-control" /> 
          <span class="input-group-addon"><i></i></span>
        </div>
    </div>
    <script type="text/javascript">
    $('#cp2').colorpicker();
    </script>
    </body>
    </html>

引导颜色选择器插件示例
引导颜色选择器插件示例
$（'#cp2'）.colorpicker（）；

您能告诉我控制台中显示的任何内容吗？我更新了我的答案，您可以检查此链接。我的控制台中没有显示错误，但无法运行将colorpicker类更改为textbox not div标记。我更新了我的回答您的意思是没有像$（'#cp2'）这样放置@pushonce（'scripts'）。colorpicker（）；你能告诉我控制台中有什么显示吗？我更新了我的答案，你可以检查这个链接。它在我的控制台中没有显示错误，但没有运行。将colorpicker类更改为textbox not div标记。我更新了我的回答。你的意思是没有像$（'#cp2'）这样的@pushonce（'scripts'）。colorpicker（）；“它不工作”是一个毫无意义的问题描述，并且没有提到抛出的错误。花点时间阅读@charlietfl，我不知道添加css文件时代码是否正确？“它不工作”是一个毫无意义的问题描述，并且没有提到抛出的错误。花点时间阅读@charlietfl，我不知道用代码添加css文件是否正确？