javascript - 如何在属性内设置唯一 ID？

Question

我有一个表格，其中包含一些编码如下的列表项:

<li data-thumbnail-path="content/media/thumbnails/1.jpg"
    data-url="content/media/images/1.jpg"
    data-thumbnail-overlay-color="#aa4080">
    <div>
        <p class="gallery1DecHeader">First description</p>
    </div>
</li>

我的目的是使用 ColorFinder data-thumbnail-overlay-color=""; 内的 JavaScript。此 JavaScript 需要 2 个唯一的 id，image(原始图像)和 color(找到的突出颜色)，如 example 所示。 。由于我需要使用它来更改叠加颜色，因此如何将 color id 插入到我的 data-thumbnail-overlay-color=""; 属性中？有其他方法可以做到这一点吗？

Answer 1

我真的不知道你是如何打印你的 <li>元素。

首先，您的标签位于 <li 内无效，您不应在 data 中使用“-”字符，因此我建议您将 HTML 更改为:

<li data-thumbnailPath="https://www.bitblokes.de/wp-content/uploads/2011/01/crunchbang-linux-logo-150x150.png"
    data-url="https://www.bitblokes.de/wp-content/uploads/2011/01/crunchbang-linux-logo-150x150.png"
    data-thumbnailOverlayColor="">
    <div>
        <p class="gallery1DecHeader">First description</p>
    </div>
</li>

注意:该图像是此 html 中的占位符，请将其更改为您自己页面中的内容。

也就是说，只是为了给您一个提示，这里有一个小片段可以插入 data-thumbnailOverlayColor 中。 data-thumbnailPath 内提供的图像的 RGB 数据的十六进制:

Javascript:

首先，我们必须编写一个函数将 RGB 结果转换为有效的十六进制代码。我们要在这里窃取它:RGB to Hex and Hex to RGB

function componentToHex(c) {
    var hex = c.toString(16);
    return hex.length == 1 ? "0" + hex : hex;
}

function rgbToHex(r, g, b) {
    return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b);
}

其次，我们将循环遍历 EACH <li> DOM 元素，我们将从 data-thumbnailPath 创建一个图像对象。从该图像对象中，我们将临时创建一个 ColorFinder 实例，检索最突出的颜色并在 data-thumbnailOverlayColor 中解析它:

var liIterator = document.getElementsByTagName("li");
for (var i = 0; i < liIterator.length; i++) {
 var img = new Image();
    img.src = liIterator[i].dataset.thumbnailPath;
    var rgb = new ColorFinder().getMostProminentColor(img);
    liIterator[i].setAttribute("data-thumbnailOverlayColor", rgbToHex(rgb.r, rgb.g, rgb.b));
}

输出如下[视觉]:

HTML 输出是这样的:

工作 fiddle 可以在这里找到:

http://jsfiddle.net/82bo2wtx/

编辑:

我对标签元素的理解是错误的，接受“-”，但上面的示例也有效。

为了减少您的工作量，这里是适合您的具体情况的 fiddle :您只需将以下内容复制到脚本中并将其包含在您的文档中，或者更容易，在最在文档底部(就在 </body> 之前，写下以下内容:

<script type="javascript">
var liIterator = document.getElementsByTagName("li");

for (var i = 0; i < liIterator.length; i++) {
 var img = new Image();
    img.src = liIterator[i].dataset["thumbnail-path"];
    var rgb = new ColorFinder().getMostProminentColor(img);
    liIterator[i].setAttribute("data-thumbnail-overlay-color", rgbToHex(rgb.r, rgb.g, rgb.b));
}

function componentToHex(c) {
    var hex = c.toString(16);
    return hex.length == 1 ? "0" + hex : hex;
}

function rgbToHex(r, g, b) {
    return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b);
}
</script>

http://jsfiddle.net/82bo2wtx/1/

** 假设您已包含 ColorFinder 库 **