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);
        }
    });
});