0

滑块根据组合值显示不同的标志。我有2个问题。

1 - 有一个“var img = 'snackapp.png';” 行，目前显示为一个值，我不明白它在代码中执行的目的。需要吗？它链接到的徽章显示在代码中，我不希望它显示。

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 回答