在动态元素上应用渐变或纯色

Question

我正在尝试使用jquery将渐变或纯色应用于元素.为什么用jQuery？因为这个站点有几种不同的颜色组合,所以生成css类太多了.

假设我有一个从JSON调用生成的列表

<div class="colours">
 <ul>
  <li class="black white"></li>
  <li class="green"></li>
 </ul>
</div>

如您所见,我需要一个带有渐变(黑/白)和一个实心(绿色)元素的列表元素.

所以我的问题是如何在列表类中包含两种颜色时设置渐变,或者在只需要一种颜色时设置纯​​色？

使用下面的代码,它总是给我"productHtml不是一个函数"或[object object]当我尝试应用颜色时.

$.each(data.product.custom, function(i, custom) {

        var productsHtml = [];
        $.each(custom.values, function(index, value){
          var color = (value.title).toLowerCase();

          var colorClean = color.replace(/\s?\/\s?/," ");
          var colors = colorClean.split(/\s+/);
          if (colors.length===1) {
            colors[1] = colors[0];
          }

       // var productHtml = '' +
       //        '<li class="'+colorClean+'" ></li>';

         var productHtml = $('<li></li>').css({ 
            'background': '-moz-linear-gradient(-45deg,  + colors[0] + 0%, + colors[0] + 49%, + colors[1] + 49%, + colors[1] + 100%)',
            //etc etc
        });
          productsHtml.push(productHtml);
        });
        productsHtml = productsHtml.join('');

        $('.product.'+id+' .colours').html('<ul>'+productsHtml+'</ul>');

      });

我做错了什么？

Answer 1

这是使用data-attribute的解决方案.

1. 首先,我遍历.colours中的所有<li>元素.
2. 然后找到它的数据颜色属性.
3. 使用必要的线性渐变信息创建一个字符串.
4. 在其数据属性中添加所有颜色(用","分隔).
5. 关闭线性渐变信息字符串.
6. 将线性渐变应用于css规则css().

注意它可以有任何颜色值:

• data-colour("rgb(255,123,43)");
• data-colour("#222 #546");
• data-colour("rgb(2,150,255) #3a1");

$(".colours").find('li').each(function(index, e) {
  var $elem = $(e);
  var colourattri = $(this).data("colour");
  var colours = colourattri.split(",");

  if (colours.length >= 2) {
    var linear = "linear-gradient(90deg, ";

    for (var index in colours) {
      linear += colours[index];
      if (index != colours.length - 1) {
        linear += ", ";
      }
    }
    linear += ")";
    $elem.css({
      background: linear,
    });
  } else if (colours.length == 1) {
    $elem.css("background-color", colours[0]);
  }
});

li {
  padding: 20px;
  color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="colours">
  <ul>
    <li data-colour="black">Some text here</li>
    <li data-colour="black, white">Some text here</li>
    <li data-colour="red, blue">Some text here</li>
    <li data-colour="pink, white">Some text here</li>
    <!-- This can take a lot of colours-->
    <li data-colour="red, Orange, green, blue, indigo, violet">Some text here</li>
    <li data-colour="rgb(22,150,255), red, #2c3">Some text here</li>
    <li data-colour="rgb(22,150,255) 50%, red 60%, #2c3 90%">Some text here</li>
  </ul>
</div>