jquery - 滑块没有将正确的值加在一起然后切换图像的问题

Question

以下代码旨在将所有滑块条总数相加，然后根据已达到的级别切换图像。目前它似乎只适用于切换到第一级，任何高于 50 并且图像不会改变。我错过了什么？

       <script>
       $(function() {
      $( ".slider" ).slider({
    orientation: "vertical",
    range: "min",
    min: 0,
    max: 100,
    value: 0,
    slide: function( event, ui ) {
 var total = 0;
$('.slider').each( function() {
    total += $(this).slider('value');
});

var img = 'img1.jpg';
if( total<=100 ) img = 'img1.jpg';
else if( total>=200 ) img = 'img2.jpg';
else if( total>=300 ) img = 'img3.jpg';
else if( total>=400 ) img = 'img4.jpg';
else if( total>=500 ) img = 'img5.jpg';

 ;

   $('#amount-img').attr( 'src', 'img/'+img );
  }
 });
   });


  </script>

Answer 1

您需要更改条件的顺序：

if( total>=150 ) img = 'img1.jpg';
else if( total>=100 ) img = 'img3.jpg';
else if( total>=50 ) img = 'img2.jpg';

否则第一个适用于所有情况

Answer 2

问题是您在 if 语句中的第一个条件得到满足，然后跳过其余条件。

例如。数字 120 大于 50，所以 if 语句到此结束。

这将解决问题：

$(function () {
    $(".slider").slider({
        orientation: "vertical",
        range: "min",
        min: 0,
        max: 100,
        value: 10,
        slide: function (event, ui) {
            var total = 0;
            $('.slider').each(function () {
                total += $(this).slider('value');
            });

            var img = 'img1.jpg';

            if (total >= 150) img = 'img1.jpg';             
            else if (total >= 100) img = 'img3.jpg';
            else if (total >= 50) img = 'img2.jpg';

            $('#amount-img').attr('src', 'img/' + img);
        }
    });
});