Код работает с prototype.js, но не с библиотекой jquery

Question

Следующий код работает только с prototype.js, но не работает с jquery. Как я могу изменить этот код, чтобы он работал с последней версией jquery?

var colors = [ 'feff35','fff600','ffe800','d0eb2c','aed14f','40aa48' ]; 
 
    
 
    colors.each(function (color) { 
 
     $$('.color-picker-bg')[0].insert('<div class="square" style="background: #' + color + '"></div>'); 
 
    }); 
 
    
 
    $$('.color-picker-bg')[0].on('click', '.square', function (event, square) { 
 
     background = square.getStyle('background'); 
 
     $$('.bg').each(function (backgroundx) { 
 
      backgroundx.setStyle({ 'background': background }); 
 
     }); 
 
    });

.square { 
 
    width: 31.25px; 
 
    height: 31.25px; 
 
    float:left; 
 
    cursor:pointer; 
 
\t text-align:center; 
 
    } 
 
.square:hover::before{font-family:FontAwesome;content:"\f111";color:#fff;line-height: 31.25px;font-size:12px}

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/prototype/1.7.1.0/prototype.js"></script> 
 
<div class="color-picker-bg"></div> 
 
<div class="bg">content</div>

Answer 1

Я создал скрипку для вас здесь: -

http://jsfiddle.net/amitthk/7qep68sr/

В основном по нажатию любой из квадратов, цвет фона изменяется соответствующим образом. Я считаю, что это то, что вы хотите.

$(document).ready(function(){ 
 

 
var colors = [ 'feff35','fff600','ffe800','d0eb2c','aed14f','40aa48','71cde3','08a6f5','007cba','c200ff','a700dc','8601b0','ff7365','ff044e','f40000','c3003d','ff8400','ff6c00','eea407','e68325','fffefe','f7f7f7','d1d1d1','000000' ]; 
 
var strDiv=''; 
 
$(colors).each(function (idx) { 
 
    strDiv += '<div class="square" style="background: #' + colors[idx] + '">&nbsp</div>' 
 
}); 
 
    $('.color-picker-bg').first().html(strDiv); 
 
    
 
    $('.color-picker-bg:first-child').on('click', '.square', function (event) { 
 
    var $square = $(this); 
 

 
    background = $square.css('backgroundColor'); 
 
    $('.bg').each(function() { 
 
     $(this).css('background', background); 
 
    }); 
 
}); 
 
    });

.bg{width:100%; height:40px; background-color:#fefefe;clear:both;float:left;border:solid 1px #ccc} 
 
.color-picker-bg .square{width:40px; height:40px; border:solid 1px #cccccc;float:left}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
<div class='color-picker-bg'> 
 
    
 
    &nbsp; 
 
    </div> 
 

 
<div class="bg"> 
 
     &nbsp;</div> 
 

 
</div>