Estoy tratando de reemplazar el color de fondo ul> li con la imagen, se basa en la condición según el #color. Lo he intentado con css pero sin suerte.
Se agradece la ayuda
<ul class="tt-options-swatch options-middle filtres-js"> <li> <a class="options-color" style="background:#000000" href="/collections/black">Black</a> </li> <li> <a class="options-color" style="background:#FFFFFF" href="/collections/white">White</a> </li> <li> <a class="options-color" style="background:#ccccff" href="/collections/violet">Violet </a> </li> </ul>Entonces, lo que estoy tratando de hacer es IF style="background:#ccccff" y luego reemplazar con image.
Gracias por adelantado.
Saludos
He hecho un ejemplo torpe de cómo hacerlo aquí:
https://codepen.io/javiercampos/pen/abwwrWX
El código:
$('ul>li').each(function() { if($(this).children().css("background-color") == 'rgb(255, 255, 255)') { $(this).css('background-image', 'url(//media.istockphoto.com/vectors/abstract-blurred-colorful-background-vector-id1185382671?k=20&m=1185382671&s=612x612&w=0&h=QvHSiV0uDYhl69m1rpIt0aYbk4vmpl9kjVcfkMkgyfw=)'); $(this).children().css('background-color', ""); } if($(this).children().css("background-color") == 'rgb(0, 0, 0)') { $(this).css('background-image', 'url(//miuc.org/wp-content/uploads/2018/02/How-can-colours-help-you-in-your-everyday-life.jpg)'); $(this).children().css('background-color', ""); } }); Tenga en cuenta que estoy comprobando la propiedad CSS de color de fondo que devuelve una cadena en la forma rgb(x, y, z) , no necesariamente cómo se aplica en el HTML.
También estoy eliminando el color de fondo en la a (básicamente en todos los descendientes directos de la li ) porque eso es probablemente lo que quieres.
Tenga en cuenta que esta solución es bastante torpe y solo funcionará si el HTML es exactamente como lo pintó en la pregunta, pero podría ser un comienzo (además, las imágenes elegidas no representan "blanco" o "negro" en absoluto, son los dos primeros resultados de google imágenes buscando "imagen en color")
A ver si te ayuda
nota: establece bgcolor en la etiqueta de anclaje. Puede usar window.getComputedStyle(list).backgroundColor para cada elemento como este
// select all a tag var lists = document.querySelectorAll('ul > li > a'); // looping foreach lists.forEach(list => { const bgcol = window.getComputedStyle(list).backgroundColor; console.log(bgcol); bgcol == 'rgb(204, 204, 255)' ? console.log('Change to Img') : console.log('Skip'); }) <ul class="tt-options-swatch options-middle filtres-js"> <li> <a class="options-color" style="background:#000000" href="/collections/black">Black</a> </li> <li> <a class="options-color" style="background:#FFFFFF" href="/collections/white">White</a> </li> <li> <a class="options-color" style="background:#ccccff" href="/collections/violet">Violet </a> </li> </ul>pero window.getComputedStyle(list).backgroundColor devuelve rgb, observe un color hexa como `#fff
¿No podría simplemente poner el estilo dentro del atributo de datos? <a class="options-color" style="background:#FFFFFF" data-style="white" href="#">White</a> .
De esta manera, podría obtener el valor de los datos y usarlo como href .
const hrefColor = element.dataset.style luego element.href = '/collections/'+hrefColor