Question

我有一个颜色选择器，通过点击铅笔glyphicon出现。我只是想在列表元素上应用颜色选择器的颜色，即它是铅笔glyphicon的祖父。我有一个以下ruby前端代码：

 <% 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，根据该zip，我有一个以下的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);
     }

如何使用颜色选择器在父元素上应用CSS颜色？

2 个答案: