无法使用Bootstrap滑块更改不透明度值

Question

For some reason, the slider will not change the value, I keep getting " Uncaught TypeError: Cannot set property 'opacity' of undefined " errors in the browser console.

I just want to change the value of opacity from the initial value of 1, to the value of the slider multiplied by .01.....

my script below:

<div id="jpegcam" class="jpegcam_slider" style="opacity: 1; z-index: 1; position: absolute; margin-left: auto; margin-right: auto; left: 0; right: 0; top: 239px"></div>

<input id="ex1" data-slider-id='ex1Slider' type="text" data-slider-min="0" data-slider-max="100" data-slider-step="1" data-slider-value="100"/>
            <script>
                $('#ex1').slider({
                    formater: function(opacity) {
                        return 'Current value: ' + opacity;
                    }
                });
                $('#ex1').on('slide', function(value)
                {
                    $('.jpegcam_slider').style.opacity = (value*.01);
                });
            </script>

Been at it for a good hour or two looking up on Google and forums but coming up short...

What am I doing wrong? Thanks

PS I'm using the slider bootstrap js and css plugin from here .

Answer 1

您可以使用css()代替，因为$('.jpegcam_slider')是jQuery对象：

$('.jpegcam_slider').css('opacity', value*.01);

Answer 2

You're combining jQuery with generic JavaScript.

You need to change this line:

$('.jpegcam_slider').style.opacity = (value*.01);

To either get the native element object from the jQuery object (using [0] ):

$('.jpegcam_slider')[0].style.opacity = (value*.01);

Or use jQuery's built-in CSS method :

$('.jpegcam_slider').css({ opacity: value*.01 });

See http://try.jquery.com and http://learn.jquery.com to understand the basics.