java 脚本滑块触发器上显示的图像不正确

Incorrect image being shown on java script slider bar trigger

本文关键字：显示 图像 不正确 触发器 脚本 java      更新时间：2023-09-26

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

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

这将使热饮成为默认图像。

相关文章：