如何使用顏色選擇器將CSS顏色應用於父元素？

Question

我有一個顏色選擇器，該顏色選擇器通過單擊鉛筆glyphicon出現。 我只想將顏色選擇器中的顏色應用於列表元素，即鉛筆glyphicon的祖父。 我有以下紅寶石前端代碼：

 <% categories.each(function (category) { %>
    <li id="<%= category.id %>" class="Round-boxes my-sortable">

      <% if(category.get("is_owner")) { %>   
        <div class="color-picker-pencil picker">
           <span class="glyphicon glyphicon-pencil"></span>
        </div>
      <% } %> 
    </li>
  <% }); %>

我正在遵循此tutorail，根據它，我將在后面的JS代碼中進行一些細微的更改。

JS代碼：

  applyColor: function(event) { myel = $(event.target).parent().parent() console.log(myel); $('.picker').colpick({ layout: 'hex', submit: 0, colorScheme: 'dark', onChange: function(hsb, hex, rgb, myel, bySetColor) { $(myel).css('background-color:', '#' + hex); } }).keyup(function() { $(this).colpickSetColor(this.value); }); } 

我應該怎么做才能做到這一點？ 提前致謝。

Answer 1

這只是applyColor函數中的語法錯誤，並且進行了一些代碼更改，我替換了以下代碼以替換現有代碼：

    applyColor: function(event){
    $('.picker').colpick({
      layout:'hex',
      submit:0,
      colorScheme:'dark',
      onChange:function(hsb,hex,rgb,myel,bySetColor) {

        myel = $(myel).parent();
        $(myel).css('background-color','#'+hex);

      }

    }).keyup(function(){

    $(this).colpickSetColor(this.value);

    });

  }

而且一切正常。 請參見onChange主體中的兩行代碼。 並將其與有問題的代碼進行比較。

Answer 2

您是否嘗試使用parent（）Jquery函數？

onChange: function(hsb, hex, rgb, myel, bySetColor) {

       $(myel).parent('li').css('background-color:', '#' + hex);
     }