通过下拉方式接收的JQuery变量不应用css

Question

我知道可以使用变量作为jQuery应用的css属性(使用.css('property',variable))，但由于某种原因，成功获得的变量没有被放入css中。

下面是我的JQuery代码：

    $('#color-scheme').change(function(){
      var colorScheme = $('#color-scheme').val();
      $('.wppw-title-font-color').css('color','');
      $('.wppw-background-color').css('background-color','');
      $('.wppw-title-font-color').css('color',colorScheme);
      $('.wppw-background-color').css('background-color',colorScheme);
      console.log(colorScheme);
    });

我目前正在做的项目的演示可以在这里找到：http://codepen.io/zephyr/pen/ipsHu

我希望用户能够通过我创建的菜单更改我的fancybox的样式。(我只想使用JQuery来做这件事，同时也可以在菜单上进行更改建议，以便更容易地获得所需的结果。)

谢谢!

谢谢你的回复，原来我是个傻瓜，没有删除css的！重要属性，我的错！

Answer 1

它不能工作，因为!important规则附加到您想要更改的东西上。试一试：

$('#color-scheme').change(function(){
  var colorScheme = $(this).val();
  $('.wppw-title-font-color').css('cssText', 'color: ' + colorScheme + ' !important;');
  $('.wppw-background-color').css('cssText', 'background-color: ' + colorScheme + ' !important;');
  console.log(colorScheme);
});

还有其他方法可以做到这一点，请看一下this question。

编辑：要使您的字体选择工作，您需要删除分号(;)从末尾的值在选择。

Answer 2

问题可能在你的css，你已经给颜色一样重要。

..wppw标题-字体颜色:悬停{颜色：#660000！重要；}

尝试删除！重要；..wppw标题-字体颜色:悬停{颜色：#660000}

或者在jquery中，尝试这样做。

$('#color-scheme').change(function(){
  var colorScheme = $('#color-scheme').val() +" !important";
  $('.wppw-title-font-color').css('color','');
  $('.wppw-background-color').css('background-color','');
  $('.wppw-title-font-color').css('color',colorScheme);
  $('.wppw-background-color').css('background-color',colorScheme);
  console.log(colorScheme);
});