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

Question

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

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

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>

Answer 1

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

将使热饮成为默认图像。

javascript滑动条触发器上显示的图像不正确

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

2此外，在第二次移动滑块后，徽章并不总是更新。我该如何解决这个问题？

1 个答案: