使用jQuery input滑块通过-webkit-filter调整图片透明度代码不生效求助

问题根因 #

• 字符串拼接语法错误：你代码中使用${}做变量插值，但外层包裹的是普通单引号，只有反引号包裹的模板字符串才支持${}插值语法，这里属于语法错误，浏览器无法正确读取滑块值。
• 潜在选择器拼写错误：图片选择器#imgSlector大概率拼写错误，正确写法应为#imgSelector（缺失字母e）。
• 兼容性不足：仅设置了-webkit-filter私有前缀属性，未设置标准filter属性，非webkit内核浏览器无法生效。

修复后代码 #

$(document).on('input change', '#slider', function() {
    // 直接用this获取当前滑块值，避免重复查询DOM
    var opacitySet = $(this).val();
    $('#imgSelector').css({
        '-webkit-filter': `opacity(${opacitySet}%)`,
        'filter': `opacity(${opacitySet}%)`
    }); 
});

如果你不习惯用模板字符串，也可以用加号做字符串拼接：

$('#imgSelector').css({
    '-webkit-filter': 'opacity(' + opacitySet + '%)',
    'filter': 'opacity(' + opacitySet + '%)'
});

额外检查项 #

确认你的range滑块的取值范围是0-100，如果滑块取值是0-1的小数，不需要拼接%，直接写opacity(${opacitySet})即可。

内容的提问来源于stack exchange，提问作者Zuffido