将字符串添加到空 div 时可以设置文本的颜色吗？

Posted 2023-05-09

【中文标题】将字符串添加到空 div 时可以设置文本的颜色吗？

【英文标题】：Can I set the colour of text when adding strings to an empty div?

【发布时间】：2020-07-21 12:01:09

【问题描述】：

我目前正在开发一款联网多人游戏，而我目前写出玩家列表的方法是使用 jQuery 将数组中的字符串添加到空中。

我的代码如下所示：

var html = '';
for (i = 0; i < data.length; i++)
    html += (i+1) + ". " + data[i] + '<br/>';

$players.html(html);

这一切都有效，但我想单独设置每个字符串的颜色。比如，第一行是黑色，第二行是红色，第三行是蓝色，以此类推。

【参考方案1】：

你可以做这样的事情。显然，您可以随时更改颜色及其顺序。

$( document ).ready(function() 
  var data = ['Bob','Smith','John','Jackson','Michael','Steve'];
  var colors = ['red','blue','green','orange'];
  var html = '';
  for (i = 0; i < data.length; i++)
    html += '<p style="color: '+ colors[i%colors.length] + ';">' + (i+1) + ". " + data[i] + '</p><br/>';
  
  $('.players').html(html);
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="players"></div>

【参考方案2】：

您需要将每个字符串包装在另一个标签中，例如...

<p>string</p>

然后您可以在该标签上单独设置类属性或样式属性。例如。 3 个建议选项...

<p class="line2">string</p>
<p class="red">string</p>
<p style="color:red">string</p>

如果线条的颜色应该一致，我个人会使用“类”选项，因为它允许您只设置每种样式一次。

编辑：我刚刚意识到您还想知道如何为循环内的每次迭代计算离散值。为此，我将首先创建一个样式名称或颜色值数组，然后使用与您正在循环的数组相同的索引位置应用它们。为了节省您必须定义一个保证至少与您的播放器数组一样长的颜色数组，您可以使用模（余数）运算符“%”循环遍历相同的颜色列表，例如...

var colors = ["black", "red", "blue"];
var html = '';
for (i = 0; i < data.length; i++)
    html += "<p style='color:" + colors[i % 3] + "'>" + (i+1) + ". " + data[i] + '</p>';

$players.html(html);

这会将 color[0] 应用到第 0 行，将 color[1] 应用到第 1 行，将 color[2] 应用到第 2 行，然后环绕到第 3 行的 color[0]。

为了避免在颜色列表更改时修改模值（“3”），进一步的改进是将colors[i % 3] 替换为colors[i % colors.length]。

【讨论】：

<p> 标签具有自己的继承样式。如果你只想改变颜色，你会想使用<span>。

同意<span> 完全有效，但没有语义。我个人更喜欢尽可能使用语义标记，因为它有助于可访问性。 TBH，这里最好的语义选择是一个有序列表（即<ol><li>...</li></ol>），但这超出了问题的范围，并且会不必要地复杂化我的答案。任何语义标记的固有样式始终可以（并且应该）根据需要重置。

@Rooksword - 请记住接受其中一个答案，以支持那些支持你的人:-)