Question

我的代码遇到了一些麻烦。我尝试根据用户输入动态更改背景颜色。但是我不明白。我认为这很容易，而且我只是盲目的。

这是我的HTML标记和jQuery：

        <script>
        
            var height;
            var width;

            $('#height-button').click(function() {
              height = $("#height").val();
              $("#square").css("height", height);
            });
            
            $('#width-button').click(function() {
              width = $("#width").val();
              $("#square").css("width", width);
            });

           $(function () {
                $("#cpl").change(function(){
                    $("#square").css("background", $("#cpl").val());
                });
            })
            
            $(function () {
                $('#cp1').colorpicker();
            });
            
        </script>

<head>
        
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
        <link href="ASSETS/BT-CP/css/bootstrap-colorpicker.css" rel="stylesheet">
        <link rel="stylesheet" href="ASSETS/CSS/costum.css">
        
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
        <script src="https://code.jquery.com/jquery-3.2.1.js"></script>
        <script src="ASSETS/BT-CP/js/bootstrap-colorpicker.js"></script>
        
    </head>
    
    <body>

        <div class="container-fluid py-4 col-12">
            <div id="square"></div>
        </div>
            
        <div class="container py-4 controller-interface">
        
            <ul class="nav nav-tabs nav-justified" id="pills-tab" role="tablist">
              <li class="nav-item">
                <a class="nav-link rounded-0 active" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true">Home</a>
              </li>
              <li class="nav-item">
                <a class="nav-link rounded-0" id="pills-profile-tab" data-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</a>
              </li>
              <li class="nav-item">
                <a class="nav-link rounded-0" id="pills-contact-tab" data-toggle="pill" href="#pills-contact" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</a>
              </li>
            </ul>
            
            <div class="tab-content py-3 px-3 bg-light border border-top-0" id="pills-tabContent">
              <div class="tab-pane show active rounded-bottom" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">
                
                <div class="row">
                    
                    <div class="col-6">
                        <div class="input-group py-2">
                          <input type="number" class="form-control" placeholder="Breite" id="width">
                          <div class="input-group-append">
                            <button class="btn" id="width-button" type="button">Breitenangabe bestätigen</button>
                          </div>
                        </div>
                    </div>
                    
                    <div class="col-6">
                        <div class="input-group py-2">
                          <input type="number" class="form-control" placeholder="Höhe" id="height">
                          <div class="input-group-append">
                            <button class="btn" id="height-button" type="button">Höhenangabe bestätigen</button>
                          </div>
                        </div>
                    </div>
                    
                    <div class="col-6">
                        <div class="input-group py-2">
                          <input type="text" class="form-control" placeholder="Farbe" id="cp1" value="">
                        </div>
                    </div>

                </div>

              </div>
              <div class="tab-pane rounded-bottom" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">...</div>
              <div class="tab-pane rounded-bottom" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">...</div>
            </div>
            
        </div>

我需要做一些可以随时更改的事情吗？如果用户使用颜色选择器触发输入，它会立即改变，那就太好了。

感谢您的光临！

Answer 1

您遇到的问题是因为颜色选择器的ID为cp1，而在js代码中，您使用的是cpl（l-是字母，而不是数字）

从以下位置更改代码：

 $(function () {
     $("#cpl").change(function(){
         $("#square").css("background", $("#cpl").val());
     });
 });

对此：

 $(function () {
     $("#cp1").change(function(){
         $("#square").css("background", $("#cp1").val()); // You can also use $(this).val() here to set the value
     });
 });

您可以在此处查看代码的有效演示：https://codepen.io/anon/pen/KerMKg 我无法启动颜色选择器，但是您可以在框中输入#000之类的值，它将更改背景

输入的onChange不起作用

1 个答案: