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

Question

我试着用输出做出许多滑块。 我想要基于滑块的组合输出显示和隐藏某些div。

我的问题是，我怎样才能使用var“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上加载，而不是在需要时加载。

现在它的工作！