jQuery use variables in .css()

Question

I've written this code and it doesnt work

$('.item').each(function(){
    var ItemGradient1 = $(this).attr('data-gradient-1');
    var ItemGradient2 = $(this).attr('data-gradient-2');
    var ItemGradient = 'linear-gradient(to right bottom, ' + ItemGradient1 + ', ' + ItemGradient2 + ');'
    $(this).children('.portfolio-wrapper').append('<div class="item-after"></div>');
    $(this).children('.portfolio-wrapper').children('.item-after').css('background', ItemGradient);
    console.log(ItemGradient);
});

I think it doenst work because of this line:

    $(this).children('.portfolio-wrapper').children('.item-after').css('background', ItemGradient);

This is the html:

      <div class="item Others" data-cat="Others" data-path="/portfolio/others/jonasplatin_website/" data-gradient-1="#ffef80" data-gradient-2="#464646">
          <div class="portfolio-wrapper">
              <img src="/portfolio/others/jonasplatin_website/thumbnail.jpg" alt="Jonas Platin unofficial website" />
              <div class="desc">
                  <h2 class="item-info">Jonas Platin unofficial website</h2>
                  <h3 class="item-info">Webdesign</h3>
              </div>
          </div>
      </div>

Do you see any errors? Thanks for helping

I think it would be a good idea to also show the HTML structure — Tomas Ramirez Sarduy
– Tomas Ramirez Sarduy, Commented Oct 15, 2017 at 15:24
What is it supposed to do? What about the line you highlight makes you think it is the problem? — Scott Hunter
– Scott Hunter, Commented Oct 15, 2017 at 15:26

Tomas Ramirez Sarduy · Accepted Answer · 2017-10-15 15:46:53Z

1

The problem is with this line:

var ItemGradient = 'linear-gradient(to right bottom, ' + ItemGradient1 + ', ' + ItemGradient2 + ');'

the css function is rejecting ItemGradient because of the extra ; at the end of the string. Remove it and it will work :)

Since you are learning, this is another way to write that function:

$('.item').each(function(){
    var itemGradient1 = $(this).data('gradient-1');
    var itemGradient2 = $(this).data('gradient-2');
    var itemGradient = 'linear-gradient(to right bottom, ' + itemGradient1 + ', ' + itemGradient2 + ')';
    $(this)
        .find('.portfolio-wrapper')
        .append('<div class="item-after"></div>')
        .css('background', itemGradient);
});

edited Oct 15, 2017 at 15:46

answered Oct 15, 2017 at 15:41

Tomas Ramirez Sarduy

17.5k8 gold badges73 silver badges86 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

jQuery use variables in .css()

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related