Question

快速免责声明 - 我是编码和JavaScript的新手，这是我的第一篇文章，所以请放轻松我。

我有一组Hex代码用于颜色，我想使用JQuery在HTML中用颜色设置一些空div。 div有一个“square”类，坐在一个主标签内，并且在CSS中有一个高度和宽度，所以我知道它们在那里。我想按顺序附加数组，以便div按顺序着色。

这是我的HTML：

<main>
  <div class="Sample">
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
  </div>
</main>

这是数组：

let colors = ['#7e6493', '#895782', '#944a71', '#9f3c60', '#aa2f4f']
let $gameSquares = $('.square');

理想情况下，我想要的是一个函数，它使用数组中的Hex颜色逐个更改div的背景颜色。

提前致谢。

Answer 1

请澄清您的问题，如果您只想为background-color课程提供此square属性，则可以将此纯CSS解决方案与伪类:nth-child(an+b)一起使用：

square:nth-child(1){ #7e6493 };
square:nth-child(2){ #895782 };
square:nth-child(3){ #944a71 };
square:nth-child(4){ #9f3c60 };
square:nth-child(5){ #aa2f4f };

more about nth-child from MDN docs

Answer 2

let colors = ['#7e6493', '#895782', '#944a71', '#9f3c60', '#aa2f4f']
let $gameSquares = $('.square');

$gameSquares.each(function(idx, el) {
  $(el).css('backgroundColor', colors[idx]);
});

.square
{
   width: 50px;
   height: 50px;
   float: left;
   border: 1px solid #000;
   margin: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<main>
  <div class="Sample">
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
  </div>
</main>

Answer 3

colors = ['#7e6493', '#895782', '#944a71', '#9f3c60', '#aa2f4f'];
i = 0;
totalColors = colors.length;
$('.square').each( function(){
   $(this).css('backgroundColor', colors[i]);
   if (i >= totalColors){
      i = 0;
   } else {
      i++;
   }
});

Answer 4

您可以使用此代码：

let colors = ['#7e6493', '#895782', '#944a71', '#9f3c60', '#aa2f4f']

$('.square').each(function(index, element){
    $(element).css("background-color", colors[index]);
})

Answer 5

试试这个：

var colorSquares = function( $squares, colors ) {
    $squares.each( function( i ) {
        if ( colors[ i ] ) {
            $( this ).css( 'background-color', colors[ i ] );
        }
    } );
}

colorBoxes( $gameSquares, colors );

Answer 6

您需要处理Javadoc和children() method，然后像这样使用它：

$(document.body).on('update_checkout',  function () {
 alert('update_checkout');
});

如何从Javascript添加CSS样式

6 个答案: