jQuery variables d'utilisation dans Css()

Question

J'ai écrit ce code et cela ne fonctionne pas

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

Je pense que ce doenst travail à cause de cette ligne:

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

Ceci est le code 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> 

Voyez-vous des erreurs? Merci de nous aider

Answer 1

Le problème est avec cette ligne:

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

la fonction css rejette ItemGradient en raison de la ; supplémentaire à la fin de la chaîne. Retirez-le et il fonctionne :)

Depuis que vous apprenez, ceci est une autre façon d'écrire cette fonction:

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