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;
	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/

基本上在点击任何方块时，背景颜色会相应变化。我相信这就是你想要的。

＆＃13;

$(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);
    });
});
  });

＆＃13;

.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}

＆＃13;

<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>

＆＃13;

代码适用于prototype.js但不适用于jquery库

1 个答案: