Question

这是一个引导程序颜色选择器。我想使用div内的按钮，当我单击该按钮时，它会显示颜色图表并更改div的背景颜色。我该怎么办？

Answer 1

只需在div中添加1个按钮，然后调用click button事件以显示颜色图表。这是一个样本。希望对您有帮助，我的朋友：））

<div class="row">
            <div class=" col-sm-4   border  border-primary  picker">
            <!--    add   a  button here -->
                <input type="button" id="btnShow" value="Choose color">
                <h4> colopicker</h4>
            </div>
            <div class=" col-sm-8">
            </div>
    </div>

$(document).ready(function(){

    $('#btnShow').on('click', function(){
        $(".picker").colorPick({
                'initialColor': 'onColorSelected',
                'palette': ["#1abc9c", "#16a085", "#2ecc71", "#27ae60", "#3498db", "#2980b9", "#9b59b6", "#8e44ad", "#34495e", "#2c3e50", "#f1c40f", "#f39c12", "#e67e22", "#d35400", "#e74c3c", "#c0392b", "#ecf0f1"],
                'onColorSelected': function() {
                    console.log("The user has selected the color: " + this.color)
                    this.element.css({
                        'backgroundColor': this.color
                    });
                }
            });
    });

});

Answer 2

检出代码的有效示例

https://codepen.io/de-co/pen/xxxgKby

<script src="https://www.jqueryscript.net/demo/Flat-HTML5-Palette-Color-Picker-For-jQuery-colorPick-js/colorPick.js"></script>
<link href="https://www.jqueryscript.net/demo/Flat-HTML5-Palette-Color-Picker-For-jQuery-colorPick-js/colorPick.css" rel="stylesheet" type="text/css">
  <div class="row">
            <div class=" col-sm-4   border  border-primary  picker">
         <!--    add   a  button here -->
              <Button >colopicker</Button>
             <h4> colopicker</h4>
            </div>
            <div class=" col-sm-8">
            </div>
       </div>
    </div>

   <script>
     $('button').click(function(){

        $(".picker").colorPick({
            'initialColor': 'onColorSelected',
            'palette': ["#1abc9c", "#16a085", "#2ecc71", "#27ae60", "#3498db", "#2980b9", "#9b59b6", "#8e44ad", "#34495e", "#2c3e50", "#f1c40f", "#f39c12", "#e67e22", "#d35400", "#e74c3c", "#c0392b", "#ecf0f1"],
            'onColorSelected': function() {
                console.log("The user has selected the color: " + this.color)
               $('button').css({
                    'backgroundColor': this.color
                });
            }
        });
         });
    </script>

Answer 3

 <html>
   <head>
      <link rel="stylesheet" href="https://www.jqueryscript.net/demo/Flat-HTML5-Palette-Color-Picker-For-jQuery-colorPick-js/colorPick.css">
   </head>
   <body>
   <div class="row">
      <div class=" col-sm-4   border  border-primary ">
         <button class=" btn btn-primary picker"> clolor </button>
         <h4> colopicker</h4>
      </div>
      <div class=" col-sm-8 show_color">
        Show color
      </div>
   </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://www.jqueryscript.net/demo/Flat-HTML5-Palette-Color-Picker-For-jQuery-colorPick-js/colorPick.js"></script>
    <script>
    $( document ).ready(function() {
        $(".picker").colorPick({
            'initialColor': 'onColorSelected',
            'palette': ["#1abc9c", "#16a085", "#2ecc71", "#27ae60", "#3498db", "#2980b9", "#9b59b6", "#8e44ad", "#34495e", "#2c3e50", "#f1c40f", "#f39c12", "#e67e22", "#d35400", "#e74c3c", "#c0392b", "#ecf0f1"],
            'onColorSelected': function() {
                console.log("The user has selected the color: " + this.color);
                /*this.element.css({
                    'backgroundColor': this.color
                });*/
                $('.show_color').css('backgroundColor',this.color);
            }
        });
    });
    </script>
   </body>
</html>

我已经按照colorpick.js插件https://www.jqueryscript.net/other/Flat-HTML5-Palette-Color-Picker-For-jQuery-colorPick-js.html

在代码中添加了document.ready和颜色调色板的CSS链接

ready（）方法用于在加载文档后使函数可用。页面DOM准备执行JavaScript代码后，您在$（document）.ready（）方法中编写的任何代码都将运行。

如何使用按钮更改颜色？

3 个答案: