Question

我正在尝试从<span>标记中读取十六进制代码并将其作为同一标记的background color - 使用以下代码与jQuery：它现在工作正常，但具体而且使用变量而不是动态获取值。

＆＃13;

$(document).ready(function() {
  var primeCol = $('.colorBlocks div:eq(0) span').text();
  $(".colorBlocks div:eq(0) span").css("background-color", primeCol);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <span>#0099cc</span>
</div>
<div>
  <span>Primary Color 2 is #OOffcc</span>
</div>

＆＃13;

我需要将其设置为动态，因此它可以使用$(this).text()，而不使用任何<span>标记的变量。此外，要在文本中标识十六进制代码，例如在第二个<span>标记中。请有人帮忙吗？我正在努力解决这个问题。

Answer 1

要实现此目的，您可以为css()方法提供一个函数，该函数将用于评估匹配集中的每个元素。从那里，您需要使用:first-child来匹配每个子div中的第一个元素，而不是它们中的第一个元素。试试这个：

＆＃13;

$(document).ready(function() {
  $('.colorBlocks div:first-child span').css('background-color', function() {
    return $(this).text();
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="colorBlocks">
  <div>
    <span>#0099cc</span>
  </div>
  <div>
    <span>Primary Color 2 is #OOffcc</span>
  </div>
</div>
<div class="colorBlocks">
  <div>
    <span>#cc0000</span>
  </div>
  <div>
    <span>Primary Color 2 is #OOffcc</span>
  </div>
</div>

＆＃13;

或者，要在所有跨度上执行此操作并查找其中的任何十六进制值，请删除:first-child选择器并使用正则表达式查找十六进制值：

＆＃13;

$(document).ready(function() {
  $('.colorBlocks div span').css('background-color', function() {
    return /#[0-9A-F]{6}/gi.exec($(this).text());
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="colorBlocks">
  <div>
    <span>#0099cc</span>
  </div>
  <div>
    <span>Primary Color 2 is #00ffcc</span>
  </div>
</div>
<div class="colorBlocks">
  <div>
    <span>#cc0000</span>
  </div>
  <div>
    <span>Primary Color 2 is #00ffcc</span>
  </div>
</div>
<div class="colorBlocks">
  <div>
    <span>#00cc00</span>
  </div>
  <div>
    <span>Primary Color 3 is not specified</span>
  </div>
</div>

＆＃13;

通过.text（）推送背景颜色的十六进制代码值

1 个答案: