jQuery 覆盖设置了不透明度的图像上的不透明度

Question

我有一个内联不透明度的图像，如下所示...

<img id="theImage" style="opacity: 0.54;" src="...source..." class="gray-scale-img profileImage img-responsive"/>

我正在使用 IonRangeSlider 来设置不透明度的新值，但问题是，如果我在范围滑块上超过 0.54，不透明度将不起作用。它会从 0.00 调整到 0.54，但如果我高于此值，它只会保持在 0.54，不会变得更亮。

$("#theImage").css({ opacity: opacity });

离子范围滑块

$("#formElement").ionRangeSlider({
min: 0,
max: 100,
onChange: function(data) {
var val = data.from;
if (val < 100) {
if (val < 10) {
var opacity = "0.0" + val;
} else {
var opacity = "0." + val;
}
} else {
var opacity = "1.0"
}
$("#theImage").css({
opacity: opacity
});
},
onFinish: function() {
...
}
});

谢谢。

Answer 1

你为什么要使用if else

直接opacity = val/100确定不透明度

编辑：请参阅下面的代码，您将了解该想法。你也可以看看@gyre的答案，它与IonRangeSlider有类似的实现，所以我会让这段代码保持更通用。

$(function(){
var slider = $("#slider");
var img = $("#theImage");

slider.change(function(){
var opacity = (this.value)/100;
img.css("opacity",opacity);
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<input id="slider" type="range" id="myRange" value="54"><br>
<img id="theImage" style="opacity: 0.54;" src="https://placehold.it/350x150">
</div>

Answer 2

您使用opacity变量进行了太多不必要的计算和分支。看起来您正在尝试将百分比转换为小数。只需使用data.from / 100作为不透明度值即可。

$("#formElement").ionRangeSlider({
min: 0,
from: 54,
max: 100,
onChange: function (data) {
$("#theImage").css('opacity', data.from / 100);
},
onFinish: function() {
// stuff
}
});

<input id="formElement" type="text" >
<img id="theImage" src="//stackoverflow.com/favicon.ico">
<!-- Resources necessary for the demo to work -->
<link href="http://ionden.com/a/plugins/ion.rangeSlider/static/css/ion.rangeSlider.skinFlat.css" rel="stylesheet"/>
<link href="http://ionden.com/a/plugins/ion.rangeSlider/static/css/ion.rangeSlider.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/IonDen/ion.rangeSlider/master/js/ion.rangeSlider.min.js"></script>

---

编辑：根据文档，您可以使用from属性配置滑块以设置默认位置。感谢zer00ne首先在他的回答中使用了这个概念。