Question

我试图制作带有输出的众多滑块。我希望根据滑块的组合输出显示和隐藏某些div。

我的问题是，如何使用变量“currentSliderValue”对滑块的输出进行函数outputValue计算。

这是我的代码：

<div class="beregner">
     <h2>Headline</h2>
        <div class="questions">
          <div class="question">
            <p class="topright"><output for="range" id="surf">0</output> min/md</p>
            <p class="large"><img src="../surfikon.svg" id="beregner-icon" width="75" height="75"><b>1</b><span><br></span></p>
              <div class="cap left"></div><div class="scroll-bar-wrap ui-widget-content ui-corner-bottom"><div id="slider_1" class="scroll-bar"> </div><div class="cap right"></div></div>
    </div>

    <div class="question">
            <p class="topright"><output for="range" id="mails">0</output> stk.</p>
          <p class="large"><img src="../mailikon.svg" id="beregner-icon" width="75" height="75"><b>Emails</b><span><br>Hvor mange e-mails sender du om dagen?</span></p>
              <div class="cap left"></div><div class="scroll-bar-wrap ui-widget-content ui-corner-bottom"><div id="slider_2" class="scroll-bar"></div><div class="cap right"> </div></div>
    </div>

    <div class="question">
            <p class="topright"><output for="range" id="musik-streaming">0</output> min/md.</p>
            <p class="large"><img src="../musikikon.svg" id="beregner-icon" width="75" height="75"><b>Streaming af musik og lydbøger</b><span><br>Hvor lang tid lytter du til musik om dagen?</span></p>
              <div class="cap left"></div><div class="scroll-bar-wrap ui-widget-content ui-corner-bottom"><div id="slider_3" class="scroll-bar"></div><div class="cap right"> </div></div>
    </div>

    <div class="question">
            <p class="topright"><output for="range" id="video-streaming">0</output> min/md.</p>
            <p><p class="large"><img src="../streamikon.svg" id="beregner-icon" width="75" height="75"><b>Streaming af video og film</b><span><br>Hvor lang tid streamer du video og film om dagen?</span></p>
              <div class="cap left"></div><div class="scroll-bar-wrap ui-widget-content ui-corner-bottom"><div id="slider_4" class="scroll-bar"></div><div class="cap right"> </div></div>
    </div>

    <div class="question">
            <p class="topright"><output for="range" id="spil">0</output> min/md.</p>
            <p><p class="large"><img src="../spilikon.svg" id="beregner-icon" width="75" height="75"><b>Online Spil</b><span><br>Hvor lang tid spiller du online spil om dagen?</span></p>
              <div class="cap left"></div><div class="scroll-bar-wrap ui-widget-content ui-corner-bottom"><div id="slider_5" class="scroll-bar"></div><div class="cap right"> </div></div>
    </div>



    <div class="resultat">
       <p>Dit estimeret dataforbrug: <output id="amount">0</output> GB om måneden</p>
    </div>


    <div class="pricingtable">
          0 GB
        </div>
        <div class="enterprisepricing">Dyrere abonnementer</div>
      </div>


    <script src="nyt-script.js" type="text/javascript" charset="utf-8"></script>

并且脚本在这里：

$(document).ready(function() {

    var weightSliderValue = 0;
    var exerciseSliderValue = 0;
    var musikSliderValue = 0;
    var streamingSliderValue = 0;
    var spilSliderValue = 0;

    function changeValue(){
        var currentSliderValue = (weightSliderValue * (3 / 1024)) + (exerciseSliderValue * (20 / 10240)) + (musikSliderValue * (42.99 / 1024)) + (streamingSliderValue * 4500 * 60 / 8 / 1024 / 1024) + (spilSliderValue * 15 * .1666667 / 1024);
        $( "#amount" ).val( currentSliderValue.toFixed(2) );
        $( "#surf" ).val( weightSliderValue );
        $( "#mails" ).val( exerciseSliderValue );
        $( "#musik-streaming" ).val( musikSliderValue );
        $( "#video-streaming" ).val( streamingSliderValue );
        $( "#spil").val( spilSliderValue )

    }

    $( "#slider_1" ).slider({
      range: "min",
      animate: true,
      value:0,
      min: 0,
      max: 200,
      step: 10,
      slide: function( event, ui ) {
          weightSliderValue = ui.value;
          changeValue();
      }
    });

    $( "#slider_2" ).slider({
      range: "min",
      animate: true,
      value:0,
      min: 0,
      max: 200,
      step: 10,
      slide: function( event, ui ) {         
          exerciseSliderValue = ui.value;
          changeValue();
      }
    });

  $("#slider_3").slider({
        range: "min",
        animate: true,
        min: 0,
        max: 120,
        step: 20,
      slide: function( event, ui ) {         
          musikSliderValue = ui.value;
          changeValue();
      }
    });
    $("#slider_4").slider({
        range: "min",
        animate: true,
        min: 0,
        max: 320,
        step: 20,
      slide: function( event, ui ) {         
          streamingSliderValue = ui.value;
          changeValue();
      }
    });
    $("#slider_5").slider({
        range: "min",
        animate: true,
        min: 0,
        max: 180,
        step: 10,
      slide: function( event, ui ) {         
          spilSliderValue = ui.value;
          changeValue();
        }
      });
function outputValue(){
  var calcprice;
  calcprice = (currentSliderValue);
  var output;
  output = (weightSliderValue * (3 / 1024)) + (exerciseSliderValue * (20 / 10240)) + (musikSliderValue * (42.99 / 1024)) + (streamingSliderValue * 4500 * 60 / 8 / 1024 / 1024) + (spilSliderValue * 15 * .1666667 / 1024);
  var outputinfo;
  if(ui.value > 100) {
    $(".pricingtable").hide();
    $(".enterprisepricing").show();
  } else {
     $(".pricingtable").show();
    $(".enterprisepricing").hide();
  } 
    output = (calcprice + " GB");
  outputinfo = (ui.value);

    $('.pricingtable').html(output);
  $('.employeenocont').html(outputinfo);

}
  });

Answer 1

我找到了解决方案：

我移动了

 if(currentSliderValue > 10) {
      $(".pricingtable").hide();
      $(".enterprisepricing").show();
        } else {
      $(".pricingtable").show();
      $(".enterprisepricing").hide();
  }

在函数changeValue中，因为它是在document.ready上加载的，而不是在我需要的时候。

现在有效！

如何根据滑块的输出计算此功能？

1 个答案: