Question

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

这是我的标记：

PS C:\Users\SvenH\AppData\Roaming\Code\User\java-ws> cd "c:\Users\SvenH\AppData\Roaming\Code\User\java-ws\" ; if ($?) { javac DataStruct.java } ; if ($?) { java DataStruct }
Error: A JNI error has occurred, please check your installation and try again
Exception in thread "main" java.lang.UnsupportedClassVersionError: DataStruct has been compiled by a more recent version of the Java Runtime (class file version 55.0), this version of the Java Runtime only recognizes class file versions up to 52.0
        at java.lang.ClassLoader.defineClass1(Native Method)
        at java.lang.ClassLoader.defineClass(Unknown Source)
        at java.security.SecureClassLoader.defineClass(Unknown Source)
        at java.net.URLClassLoader.defineClass(Unknown Source)
        at java.net.URLClassLoader.access$100(Unknown Source)
        at java.net.URLClassLoader$1.run(Unknown Source)
        at java.net.URLClassLoader$1.run(Unknown Source)
        at java.security.AccessController.doPrivileged(Native Method)
        at java.net.URLClassLoader.findClass(Unknown Source)
        at java.lang.ClassLoader.loadClass(Unknown Source)
        at sun.misc.Launcher$AppClassLoader.loadClass(Unknown Source)
        at java.lang.ClassLoader.loadClass(Unknown Source)
        at sun.launcher.LauncherHelper.checkAndLoadMain(Unknown Source)
PS C:\Users\SvenH\AppData\Roaming\Code\User\java-ws>

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

<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]对我不起作用，因为我有8种颜色...

需要类似“仅此选择器”的内容。谢谢你。

Answer 1

一个想法是考虑元素具有的属性数量。如果您只想定位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>

Answer 2

如果这是您的确切标记，则CSS属性选择器无需任何JavaScript即可工作。此代码将仅匹配具有data-img属性且值为[black-blue.png]的div。出于您所描述的确切原因，建议不要尝试按裸属性（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/

CSS选择器-元素具有这些属性，但没有其他属性

2 个答案: