ul > li replace color with image (depends on #color condition

user_7903830 0
Viewed 159

I am trying to replace ul > li background color with image it is condition-based depending on #color. I have tried with css but no luck.

Help is appreciated

<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>

So what I am trying to do is IF style="background:#ccccff" then replace with image.

Thanks in advance.

Regards

shopify css jquery javascript
3 Answers

I've made a clumsy example of how to do it here:

https://codepen.io/javiercampos/pen/abwwrWX

The code:

  $('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', "");
    }
  });

Note that I'm checking for the background-color CSS property that returns a string in the form rgb(x, y, z), not necessarily how it's applied in the HTML.

I'm also removing the background color in the a (in all direct descendants of the li basically) because that's probably what you want.

Note that this solution is pretty clumsy and will only work if the HTML is exactly how you paint it in the question, but it might be a start (also, the chosen images do not represent "white" or "black" at all, they are the first two results from google images searching for "color image")

See if it helps you

user_689720

note: You set bgcolor on anchor tag. You can use window.getComputedStyle(list).backgroundColor for each element Like this

// 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>

but window.getComputedStyle(list).backgroundColor return rgb, note a hexa color like `#fff

user_168766770

Couldn't you just put the style inside the data attribute? <a class="options-color" style="background:#FFFFFF" data-style="white" href="#">White</a>.

This way you could get the value of the data and use as href.

const hrefColor = element.dataset.style then element.href = '/collections/'+hrefColor

user_71783550
Related