Wie kann ich diese Funktion basierend auf der Ausgabe der Schieberegler berechnen lassen?

Question

Ich habe versucht, eine Vielzahl von Schiebereglern mit einer Ausgabe zu machen. Ich möchte bestimmte divs anzeigen und ausblenden basierend auf der kombinierten Ausgabe der Schieberegler.

Meine Frage ist, wie kann ich die Funktion outputValue auf die Ausgabe der Schieberegler mit der var von "currentSliderValue" berechnen lassen.

dies ist mein Code:

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

und das Skript ist hier:

ich das Innere der

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

bewegt:

$(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

ich die Lösung gefunden Funktion changeValue, da es auf document.ready geladen wurde und nicht wenn ich es brauchte.

Jetzt funktioniert es!