jQuery的使用变量

Question

我写这个代码，它不工作

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

我认为这doenst因为该行的工作：

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

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

您是否看到错误？感谢您的帮助

Answer 1

问题是这一行：

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

的CSS功能被拒绝，因为在字符串的结尾额外; ItemGradient。删除它，它会工作:)

既然你正在学习，这是另一种方式编写函数：

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