0

スライダーは、組み合わせた値に応じて異なるバッジを表示します。2つ質問があります。

1 -「var img = 'snackapp.png';」があります。これは現在値として表示されており、コードでどのような目的で実行されるのかわかりません。必要ですか？リンク先のバッジがコードに表示されていますが、表示したくありません。

2 また、スライダーが 2 回目に移動された後、バッジが常に更新されるとは限りません。これを解決するにはどうすればよいですか?

           <html lang="en">
   <head>
  <meta charset="utf-8" />
  <title>Do I need a treat>!?</title>
  <link rel="stylesheet" href="css/jquery-ui.css" type="text/css" media="screen">
  <link rel="stylesheet" href="css/grid.css" type="text/css" media="screen">
  <link rel="stylesheet" href="css/style.css" type="text/css" media="screen">
  <script src="js/jquery-1.10.2.min.js"></script>
  <script src="js/jquery-ui.js"></script>

   </head>
  <body>
   <p>
    <label for="amount">Volume:</label>
    <img id="amount-img" src="img/snackapp.png"/>
  </p>
  <style>
    .slider { height: 200px; float:left; margin-right:20px; }
  </style>
  <div class="slider"></div>
   <div class="slider"></div>
   <div class="slider"></div>
  <div class="slider"></div>
  <div class="slider"></div>

   <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 = 'snackapp.png';
    if( total>=499) img = 'booze.png';
    else if( total>=400 ) img = 'fishandchips.png';
    else if( total>=300 ) img = 'pizza.png';
    else if( total>=200 ) img = 'doughnut.png';
    else if( total>=100 ) img = 'choc.png';
    else if( total>=99 ) img = 'icecream.png';
    else if( total<=98 ) img = 'fruit.png';
    else if( total<=97 ) img = 'hotdrink.png';

    ;

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


   </script>

</body>
</html>
4

1 に答える 1

0

var img = 'snackapp.png';デフォルトのイメージのようで、それが宣言されている理由は、その if ステートメントの else 句に相当するためです。if ステートメントの条件がどれも満たされない場合は、そのimgままになりsnackapp.pngます。

スライダーを動かすたびに「バッジ」が更新されることに問題はありませんでした。画像を変更するには、スライダーを特定のしきい値を超えて移動する必要があることに気付きましたよね?. すべてのスライダーを合わせた合計値によってイメージが変化しています。

を表示したくない場合snackapp.pngは、独自のデフォルト画像で変更するか、コードを次のように変更します

HTML

<p>
    <label for="amount">Volume:</label>
    <img id="amount-img" src="img/hotdrink.png" />
</p>
<div class="slider"></div>
<div class="slider"></div>
<div class="slider"></div>
<div class="slider"></div>
<div class="slider"></div>

JS

$(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 = 'snackapp.png';
            if (total >= 499) img = 'booze.png';
            else if (total >= 400) img = 'fishandchips.png';
            else if (total >= 300) img = 'pizza.png';
            else if (total >= 200) img = 'doughnut.png';
            else if (total >= 100) img = 'choc.png';
            else if (total >= 99) img = 'icecream.png';
            else if (total >= 50) img = 'fruit.png';
            else if (total < 50) img = 'hotdrink.png';

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

これにより、hotdrink がデフォルトのイメージになります。

于 2013-09-15T08:34:21.033 に答える