使用 Javascript 编写引用属性数据的 HTML

Write HTML in reference to attribute data with Javascript

本文关键字：数据 HTML 属性 引用 Javascript 使用      更新时间：2023-09-26

我想使用带有javascript的锚标记的属性向相邻元素添加一个类：

.HTML：

<ul>
    <li><a href="#" class="swatchButton" data-color="blk"><span></span>Black</a></li>
    <li><a href="#" class="swatchButton" data-color="red"><span></span>Red</a></li>
    <li><a href="#" class="swatchButton" data-color="blu"><span></span>Blue</a></li>
    <li><a href="#" class="swatchButton" data-color="grn"><span></span>Green</a></li>
    <li><a href="#" class="swatchButton" data-color="yel"><span></span>Yellow</a></li>
</ul>

.JS：

$(document).ready(function(){
    var swatchColor = $(".swatchButton").data('color');
    $(".swatchButton").find('span').addClass(swatchColor);
});

我最终正在寻找：

<li><a href="#" class="swatchButton" data-color="blk"><span class="blk"></span>Black</a></li>

我需要用forEach()创建某种数组吗？

谢谢！http://jsfiddle.net/cL1rpk9L/

在jquery中使用each（）

$(document).ready(function(){
    $(".swatchButton").each(function() {
        var swatchColor = $(this).data('color');
        $(this).find('span').addClass(swatchColor);
    });
});

演示：https://jsfiddle.net/tamilcselvan/cL1rpk9L/3/

您的代码var swatchColor = $(".swatchButton").data('color');将返回具有类 swatchButton 的第一个元素的data-color，$(".swatchButton").find('span').addClass(swatchColor);会将该值分配给每个span元素，该元素是类 swatchButton 的元素的后代。

您需要单独设置每个范围的颜色

$('.swatchButton span').addClass(function(){
    return this.parentNode.dataset.color;
});

演示：小提琴

或

$('.swatchButton span').addClass(function(){
    return $(this).parent().data('color');
});

演示：小提琴

相关文章：