循环遍历数据值并将其指定为段落上的类

Question

我试图遍历一个.swatch-color数组，获取其数据值并将其分配给段落

首先 lang.js ，然后 lang.html

var colors = $(".swatch-color");
var dataValues = colors.data("value");
var p = $(".swatch-color p");

colors.each(function(index){
    if($(this).text().toLowerCase() === $(this).data("value")){
        p.addClass($(this).data("value"));
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<div class="colors-container">
    <div class="swatch-color" data-value="black">
        <p>Black</p>
    </div>
    <div class="swatch-color" data-value="blue">
        <p>Blue</p>
    </div>
    <div class="swatch-color" data-value="brown">
        <p>Brown</p>
    </div>
    <div class="swatch-color" data-value="clear">
        <p>Clear</p>
    </div>
    <div class="swatch-color" data-value="green">
        <p>Green</p>
    </div>
    <div class="swatch-color" data-value="grey">
        <p>Grey</p>
    </div>
    <div class="swatch-color" data-value="light-grey">
        <p>Light Grey</p>
    </div>
    <div class="swatch-color" data-value="orange">
        <p>Orange</p>
    </div>
    <div class="swatch-color" data-value="pink">
        <p>Pink</p>
    </div>
    <div class="swatch-color" data-value="purple">
        <p>Purple</p>
    </div>
    <div class="swatch-color" data-value="red">
        <p>Red</p>
    </div>
    <div class="swatch-color" data-value="white">
        <p>White</p>
    </div>
</div>

但我得到了这个：

<p class="black blue brown clear green grey light-grey orange pink purple red white">Black</p>

我需要黑色值来指定“黑色”类，蓝色“蓝色”等等。

Answer 1

您正在更改循环中的所有段落（$(".swatch-color p")）。

你想要

$("p", this).addClass($(this).data("value"));

而不是

p.addClass($(this).data("value"));