-1
私は出力付きの多数のスライダを作ろうとしました。 スライダの組み合わせ出力に基づいて、特定のdivを表示および非表示にしたいとします。この関数をスライダの出力に基づいて計算するにはどうすればよいですか?
私の質問は、 "currentSliderValue"のvarを持つスライダの出力でfunction 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);
}
});
'currentSliderValue'を' weightSliderValue'のようなグローバル変数にします – Cobote
これはやってみよう! :) – Ossi