当前位置: 动力学知识库 > 问答 > 编程问答 >

javascript - Apply gradient or solid color on dynamic element

问题描述:

I'm trying to apply a gradient or a solid color to an element with jquery. Why with jQuery? Because this site has several different color combo's so generating css classes is too much work.

Let's say I have this list generated from a JSON call

<div class="colours">

<ul>

<li class="black white"></li>

<li class="green"></li>

</ul>

</div>

As you can see I need one list element with a gradient (black/white) and one solid (green) element.

So my question is how to set either a gradient when a list class has two colors in it or a solid color when just one color is needed??

With my code below it always gives me "productHtml is not a function" or [object object] when I try to apply the colors.

$.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>');

});

What I'm I doing wrong?

网友答案:

Here is a solution using the data-attribute.

  1. First I iterate over all <li> elements in .colours.
  2. Then find its data-colour attribute.
  3. Create a string with the necessary linear-gradient info.
  4. Adding all the colours (separated by ",") in its data attribute.
  5. Closing the linear-gradient info string.
  6. applying the linear-gradient to a css rule with css().

note It can have any colour value:

  • 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>
网友答案:

I recommend reading each color individually and then applying your gradient / solid color logic. Like:

$('li').each(function(){
    var classNames = $(this).attr("class").toString().split(' ');
    $.each(classNames, function (i, className) {
        // do solid color or gradient
    });
});
分享给朋友:
您可能感兴趣的文章:
随机阅读: