Question

我有一些这样的元素：

<div class="box">
    Team 1 - #5
</div>

<div class="box">
    Team 2 - #3
</div>

现在我需要为这些方块着色，就像团队1变蓝，团队2变红。但是我怎么能这样做呢？

每个团队都是一个大团队的成员，提供团队的颜色。所以我有一张带有氏族颜色的桌子。

我正在使用MySQL表（两个表团队和部落）。在团队表中，我有一个clan表中的clan ID的外键字段

Answer 1

这很容易。如果你有一个包含你的战队及其颜色的桌子你可能在你的团队表中有一个字段，其中的部落是用外键写的吗？

因此，您的查询也应该获得具有内连接的氏族的颜色。

所以你可以将clan颜色的字段作为类导出到你的代码中，如下所示：

<div class="box team-color-<?php echo $clan_color; ?>">
    Team 1 - #3
</div>

然后您可以使用“.team-color-[CLANCOLORVARIABLE] {}”

在CSS中设置颜色

但是如果你想用jQuery包装你的文本，你可以这样做：

因此，如果您将颜色作为元素中的类名，那将是完美的。然后在jQuery中你可以做这样的事情：

$('.team-color-black').each(function() {
   var content = $(this).text;
   content.html('<span class="colorsetting">' + content + '</span>');
});

然后您的文字被包装并可以使用css设置进行格式化

Answer 2

你可以尝试这一个：

 <div class="box">
    <span>Team 1 - #5</span>
    <p>text</p>
  <p>text</p>
  <p>text</p>
</div>
<br />
<div class="box1">
   <span> Team 2 - #3</span>
     <p>text</p>
  <p>text</p>
  <p>text</p>
</div>

jquery的：

$('.box p').wrapAll('<div class="moreInfo"></div>');
$('.box1 p').wrapAll('<div class="moreInfo"></div>');

DEMO

Answer 3

您可以使用jQuery each函数轻松完成此操作，例如

<script type="text/javascript">
 var color = ['red','green'];
 $('.box').each(function(index){
    $(this).css('background',color[index]);
});

用jQuery包装元素内的文本

3 个答案: