ul > li 用图像替换颜色（取决于#color 条件答案

【问题标题】：ul > li replace color with image (depends on #color conditionul > li 用图像替换颜色（取决于#color 条件
【发布时间】：2021-09-13 16:48:34
【问题描述】：

我正在尝试用图像替换 ul > li 背景颜色，它是基于条件的，具体取决于#color。我尝试过使用 css 但没有运气。

感谢您的帮助

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

所以我要做的是 IF style="background:#ccccff" 然后替换为图片。

提前致谢。

问候

【问题讨论】：

主要问题是您想根据颜色更改ul>li，但您将颜色应用于a。你试过什么？
我在 css element.style { 1. background: #ccccff; 中尝试过2.背景：-webkit-linear-gradient(透明，透明)，url(//cdn.shopify.com/s/files/1/0105/7708/4363/files/color-multi_small.png?v=1593179030)无重复中心； }
你能改变源代码/html吗？具体来说，删除style= 并给每一行一个不同的类？
你可以用$("[style='background:#000000']")引用元素，但它会很脆弱。
@nzone 注意background CSS 是一个简写属性，你需要检查具体的样式（background-color），但同样，如果你检查li，你赢了'在那里找不到任何东西，因为您将颜色应用于a，而不是li

标签： javascript jquery css shopify

【解决方案1】：

注意：您在锚标记上设置了 bgcolor。您可以对每个元素使用 window.getComputedStyle(list).backgroundColor 像这样

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

但是 window.getComputedStyle(list).backgroundColor 返回 rgb，注意像 `#fff

这样的六色

【讨论】：

【解决方案2】：

你不能把样式放在 data 属性中吗？ <a class="options-color" style="background:#FFFFFF" data-style="white" href="#">White</a>.

这样你就可以获取数据的值并用作href。

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

【讨论】：

【解决方案3】：

我在这里做了一个笨拙的例子：

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

代码：

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

请注意，我正在检查返回 rgb(x, y, z) 形式的字符串的 background-color CSS 属性，不一定是它在 HTML 中的应用方式。

我还将删除 a 中的背景颜色（基本上是 li 的所有直系后代），因为这可能是您想要的。

请注意，此解决方案非常笨拙，仅当 HTML 正是您在问题中绘制它的方式时才有效，但这可能是一个开始（此外，所选图像不代表“白色”或“黑色”全部，它们是谷歌图像搜索“彩色图像”的前两个结果）

看看对你有没有帮助

【讨论】：

您好，我试过了，但它不适用于 shopify。
var 主题 = {}，money_format = '€{{amount_with_comma_separator}}'，color_with_border = 'White' || '空'，colors_value = '，多：#ccccff，黄色：#ffff00，zwart：#000000，蓝色：#0000ff，绿色：#00ff00，紫色：#800080，银色：#c0c0c0，白色：#ffffff，棕色： #7b3f00，浅棕色：#feb035，深绿松石：#23cddc，橙色：#fe9001，棕褐色：#eacea7，紫色：#ee82ee，粉色：#ffc0cb，灰色：#808080，红色：#ff0000，浅蓝色： #add8e6,', texture_obj = function(){return JSON.parse('{}'); }
恐怕我对shopify一无所知......如果那个html sn-p是用javascript编写的，你需要安排你的函数发生的时间-之后-呈现。我放在那里的是基本的 jquery + js，应该可以在任何你拥有这些的地方工作，在你执行它时，html 已经呈现并在 DOM 中。