Как я могу выбрать элемент только с определенными атрибутами? - PullRequest
Новая
       12

Как я могу выбрать элемент только с определенными атрибутами?

0 голосов
/ 12 мая 2019

Мне нужно вставить 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 цветов ...

Нужно что-то вроде ТОЛЬКО ЭТОГО селектора.

Ответы [ 2 ]

0 голосов
/ 17 июня 2019

Если это точная разметка, селектор атрибутов CSS будет работать без JavaScript.Этот код будет сопоставлять только div с атрибутом data-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/

0 голосов
/ 12 мая 2019

Одна идея - рассмотреть количество атрибутов, которые имеет элемент. Если вы хотите настроить таргетинг только на 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>
...