0

我需要根据颜色选择将 src 粘贴到图像中。

这是我的标记：

<div data-img="[black-blue.png]" black blue></div>
<div data-img="[black.png]"  black></div>
<div data-img="[blue.png]"  blue></div>
<div data-img="[orange.png]"  orange></div>
<div data-img="[black-blue-orange.png]" black blue orange></div>
<div data-img="[blue-orange.png]" blue orange></div>
<div data-img="[blue-red-orange.png]" blue red orange></div>

我的脚本适用于元素属性：

var attributes = '';
for(var i = 0; i<activeColorsArray.length; i++ ){
   attributes += '['+activeColorsArray[i]+']';
}

输出：[blue][black]，例如。它适用于黑色和蓝色项目，但它也可以捕捉黑色和蓝色和橙色元素。

[blue][black]:not([orange])不适合我，因为我有 8 种颜色...

只需要这个选择器。

4

2 回答 2

0

一种想法是考虑元素具有的属性数量。如果您只想定位blue，black然后您只定位具有 3 个属性的元素（包括data-img在您的情况下）

activeColorsArray= ['blue','black'];

var attributes = '';
for(var i = 0; i<activeColorsArray.length; i++ ){
   attributes += '['+activeColorsArray[i]+']';
}

var elements = document.querySelectorAll(attributes);
var items = Array.from(elements);

elements = items.filter((e) => {
 return e.attributes.length == 3;
})

for(var i=0;i<elements.length;i++) {
  elements[i].style.color="red";
}
<div data-img="[black-blue.png]" black blue>black blue</div>
<div data-img="[black.png]"  black>black</div>
<div data-img="[blue.png]"  blue>blue</div>
<div data-img="[orange.png]"  orange>orange</div>
<div data-img="[black-blue-orange.png]" black blue orange>black blue orange</div>
<div data-img="[blue-orange.png]" blue orange>blue orange</div>
<div data-img="[blue-red-orange.png]" blue red orange>blue red orange</div>

于 2019-05-12T12:22:02.353 回答
0

如果那是您的确切标记，那么 CSS 属性选择器将在没有任何 JavaScript 的情况下工作。此代码将仅匹配具有属性值的 divdata-img精确[black-blue.png]。div[black][blue] {}出于您所描述的确切原因，不建议尝试通过裸属性 ( ) 进行选择。

div[data-img="[black-blue.png]"] {
    color: red;
}
<div data-img="[black-blue.png]" black blue>black blue</div>
<div data-img="[black.png]"  black>black</div>
<div data-img="[blue.png]"  blue>blue</div>
<div data-img="[orange.png]"  orange>orange</div>
<div data-img="[black-blue-orange.png]" black blue orange>black blue orange</div>
<div data-img="[blue-orange.png]" blue orange>blue orange</div>
<div data-img="[blue-red-orange.png]" blue red orange>blue red orange</div>

https://jsfiddle.net/nk98tch1/

于 2019-06-17T14:01:05.920 回答