通过 jquery 动态添加 css 过滤器答案

【问题标题】：Add css filters dynamicaly via jquery通过 jquery 动态添加 css 过滤器
【发布时间】：2014-03-11 09:09:38
【问题描述】：

我正在尝试通过 Jquery 动态添加几个 CSS 过滤器。

所以我有一个亮度滑块和另一个对比度滑块。

我希望他们都修改一个 div。

我可以使用一个过滤器轻松做到这一点，但我很难获得两个滑块的值并将它们应用于单个 div。

我试过了，但行为很奇怪

HTML：

<input class="brightness" type="range" min="0" max="100" value="100">
<input class="saturation" type="range" min="0" max="100" value="100">
<div></div>

jQuery :

$('input').change(function(){

    var $brightness_value = $('.brightness').val(),
        $saturation_value = $('.contrast').val(),
        $brightness_string = "brightness("+$brightness_value+"%)",
        $saturation_string = "saturate("+$saturation_value+")";


    $('div').css("-webkit-filter",$brightness_string+$saturation_string);
});

有什么想法吗？

非常感谢！

【问题讨论】：

您有一个错字：$('.brighness') 缺少t。这是在真实代码中还是只是复制错误？
很遗憾只是复制错误
您要这样做吗？ jsfiddle.net/DYjw8

标签： jquery css filter slider

【解决方案1】：

您只是忘记将 % 设置为 saturate 的值：

$saturation_string = "saturate("+$saturation_value+"%)";

http://jsfiddle.net/DYjw8/3/

【讨论】：

真丢脸...谢谢老兄！