jQuery複数入力の変更

Question

スライダーを変更してjQueryを使用して一部のHTMLテキストを変更しようとしていますが、その方法を理解しましたが、チェックボックスがオンの場合のみ行う必要があります次に、チェックボックスがクリックされたときにのみそれを行うようにするには、アレイでこれをやっています。なぜなら、小数点以下ではなく時間内にそれをやろうとしているからです。 https://codepen.io/2cheeky4you/pen/QqGKpy

$(document).on('input change', '#range-slider', '#voiceover', function() { 
    //Listen to slider changes (input changes) 
    var v=$(this).val(); //Create a Variable (v), and store the value of the input change (Ex. Image 2 [imageURL]) 
    var q = document.querySelector('input[id="voiceover"]'); 
    var voiceovermain = ["<span>$0.00</span>",voiceoverslider[0]]; 
    $('#sliderStatus').html(imageUrl[v]); 
    $('#sliderPrice').html(sizeRange[v]); 
    $('#voiceoverslider').html(sizeRange[v]); 
    $('#voiceoverspan').html(voiceover[q]); 
    $("#img").prop("src", imageUrl[v]); // Modify the Images attribute src based on the sliders value, and input the value inside the imageURL[v] to display image 
}); 

これは、このウェブサイト上のコードのものを使用して私の最初の回の一つですので、ご容赦私のめちゃめちゃに空白文字：ここに私の現在のコードへのリンクです。

私は非常にうまく:)ので、何かが意味をなさないと申し訳ありません。コメントにコメントがない場合は教えてください。

Answer 1

私はあなたのスライダ位置に基づいて、2つの価格、チェックボックスに応じて、1つビーイングのoptionnalを表示したいと思います。

あなたは配列のアイディアがそれを行う最良の方法ではありません。スライダーの値を整数として使用して価格を計算する必要があると思います。

まず、2つの価格を定義することです。単純にいくつかの数学を行います。
この例では、2番目の価格をスライダーノッチあたり5ドル（ビデオ時間は5秒）と定義しました。

不明な点がある場合は、コードについてお気軽にお問い合わせください。

var sliderUnit = 5; // 5 seconds of video duration per slider notch 
 

 
var basePrice = 100; 
 
var price = 10; 
 
var subPrice = 5; 
 

 
$(document).on('input change', '#range-slider, #voiceover', function() { //Listen to slider changes (input changes) 
 
    
 
    var slider=parseInt($('#range-slider').val()); 
 
    var voiceOption = $('#voiceover'); 
 
    
 
    console.log(slider); // returns an integer from 0 to 34 
 

 
    // Time 
 
    var seconds = (slider*5)%60; 
 
    var minutes = Math.floor(slider*5/60); 
 
    if(seconds<10){seconds= "0"+seconds} // Leading zero 
 
    $('#sliderStatus').html('<span>'+minutes+":"+seconds+'</span>'); 
 
    
 
    // Price for video duration 
 
    var price1 = (slider*price) +basePrice; 
 
    $('#sliderPrice').html('<span>$'+price1+'.00</span>'); 
 

 
    // Price for voiceover 
 
    var price2 = slider*subPrice; 
 
    if(voiceOption.is(":checked")){ 
 
    $('#voiceoverspan').html('<span>$'+price2+'.00</span>'); 
 
    }else{ 
 
    $('#voiceoverspan').html('<span>$0.00</span>'); 
 
    } 
 

 
}); 
 

 

 
// ::::: Range Slider Thumb ::::: // 
 
$("#range-slider").on("mousedown mouseup", function() { //1. When user clicks their mouse down on the Range-Slider 
 
    $(this).toggleClass("thumb-down hover-ring thumb-up hover-ring-out"); 
 
});

#slider_count { 
 
    margin:0px auto; 
 
    width:200px; 
 
    padding:20px 20px; 
 
    text-align:center; 
 
    background-color:yellow; 
 
} 
 

 
/* ::::::::::::::::::::Range Slider Styles::::::::::::::::::::::::: */ 
 
.range-slider-block { 
 
    margin:0px auto; 
 
    width:90%; 
 
} 
 
#range-slider { 
 
    padding:40px 0px; 
 
    width:100%; 
 
    /*outline: 1px solid green;*/ 
 
} 
 
/* Remove Range Sliders Default Styles*/ 
 
input[type=range]{ 
 
    -webkit-appearance: none; 
 
} 
 
/* Track */ 
 
input[type=range]::-webkit-slider-runnable-track { 
 
    height: 10px; 
 
    background: #d7d7d7; 
 
    border: none; 
 
    border-radius: 6px; 
 
} 
 
input[type=range]:focus { 
 
    outline: none; 
 
} 
 
/* Thumb */ 
 
input[type=range]::-webkit-slider-thumb { 
 
    -webkit-appearance: none; 
 
    border: none; 
 
    height: 30px; 
 
    width: 30px; 
 
    border-radius: 50%; 
 
    background: #46947F; 
 
    margin-top: -9px; 
 
    transition: box-shadow 0.5s; 
 
} 
 
input[type=range]:hover::-webkit-slider-thumb { 
 
    box-shadow: 0 0 0 10pt rgba(190,190,190,0.4); 
 
    cursor:pointer; 
 
} 
 

 
/* JS Stykes */ 
 
/* Changes Thumb color to darker green when mousedownn */ 
 
input[type=range].thumb-down::-webkit-slider-thumb { 
 
    background:#316557; 
 
} 
 
/* Changes Thumb color back to light green when mouseup */ 
 
input[type=range].thumb-up::-webkit-slider-thumb { 
 
    background:#46947F; 
 
} 
 
/* Changes Ring color Green */ 
 
input[type=range].hover-ring::-webkit-slider-thumb { 
 
    box-shadow: 0 0 0 6pt rgba(70,148,127,0.46); 
 
    cursor:pointer; 
 
} 
 
input[type=range].hover-ring-out::-webkit-slider-thumb { 
 
    box-shadow: 0 0 0 0pt rgba(0,0,0,0); 
 
    cursor:pointer; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<form> 
 
    <div class="range-slider-block"> 
 
    <input type="range" id="range-slider" class="thumb-up hover-ring-out" value="0.0" min="0" max="34" step="1" /> 
 
    </div> 
 

 
    <div id="slider_count">Time = <span id="sliderStatus">0:00</span></div> 
 
    <br/> 
 
    <div id="slider_count">Subprice (Video Duration) = <span id="sliderPrice">$0.00</span></div> 
 
    <br/> 
 
    <label for="voiceover">Would you like a voiceover?</label> 
 
    <input type="checkbox" id="voiceover" name="voiceover" checked> 
 
    <div id="slider_count">Subprice (for voiceover): = <span id="voiceoverspan">$0.00</span></div> 
 
</form>

私もスライダー上のクラスを追加/削除するハンドラを改善お知らせ...

CodePen

Answer 2

ねえ、私はあなたのコードで問題を発見し、アップcodepen新しいを置く：https://codepen.io/anon/pen/LzbBOx?editors=1111

Imediately

function() { 

後にあなたが置く必要があります。

var check = $('#voiceover')[0]; 
if (check.checked) { 

    // your entire function's code here 

} 

Answer 3

を私はあなたにセクションを追加しましたコードを修正して少し修正しました。基本的には、チェックがオンかどうかをチェックし、スライダ価格の値をコピーしたif文を追加しました。もちろん、あなたは価値をもって何でもすることができますが、私はあなたがサブプライスに対してどんな価値を望んでいるのか正確には分かりませんでした。がんばろう。

var sizeRange = [" <span>$100.00</span>", 
 
    " <span>$110.00</span>", 
 
    "<span>$120.00</span>", 
 
    "<span>$130.00</span>", 
 
    "<span>$140.00</span>", 
 
    "<span>$150.00</span>", 
 
    " <span>$160.00</span>", 
 
    " <span>$170.00</span>", 
 
    " <span>$180.00</span>", 
 
    " <span>$190.00</span>", 
 
    " <span>$200.00</span>", 
 
    " <span>$210.00</span>", 
 
    " <span>$220.00</span>", 
 
    " <span>$230.00</span>", 
 
    " <span>$240.00</span>", 
 
    " <span>$250.00</span>", 
 
    " <span>$260.00</span>", 
 
    " <span>$270.00</span>", 
 
    " <span>$280.00</span>", 
 
    " <span>$290.00</span>", 
 
    " <span>$300.00</span>", 
 
    " <span>$310.00</span>", 
 
    " <span>$320.00</span>", 
 
    " <span>$350.00</span>", 
 
    " <span>$380.00</span>", 
 
    " <span>$410.00</span>", 
 
    " <span>$440.00</span>", 
 
    " <span>$470.00</span>", 
 
    " <span>$500.00</span>", 
 
    " <span>$530.00</span>", 
 
    " <span>$560.00</span>", 
 
    " <span>$590.00</span>", 
 
    " <span>$620.00</span>", 
 
    " <span>$650.00</span>", 
 
    " <span>$680.00</span>" 
 
]; 
 

 

 
var imageUrl = [" <span>:10</span>", 
 
    " <span>:15</span>", 
 
    "<span>:20</span>", 
 
    "<span>:25</span>", 
 
    "<span>:30</span>", 
 
    "<span>:35</span>", 
 
    " <span>:40</span>", 
 
    " <span>:45</span>", 
 
    " <span>:50</span>", 
 
    " <span>:55</span>", 
 
    " <span>1:00</span>", 
 
    " <span>1:05</span>", 
 
    " <span>1:10</span>", 
 
    " <span>1:15</span>", 
 
    " <span>1:20</span>", 
 
    " <span>1:25</span>", 
 
    " <span>1:30</span>", 
 
    " <span>1:35</span>", 
 
    " <span>1:40</span>", 
 
    " <span>1:45</span>", 
 
    " <span>1:50</span>", 
 
    " <span>1:55</span>", 
 
    " <span>2:00</span>", 
 
    " <span>2:15</span>", 
 
    " <span>2:30</span>", 
 
    " <span>2:45</span>", 
 
    " <span>3:00</span>", 
 
    " <span>3:15</span>", 
 
    " <span>3:30</span>", 
 
    " <span>3:45</span>", 
 
    " <span>4:00</span>", 
 
    " <span>4:15</span>", 
 
    " <span>4:30</span>", 
 
    " <span>4:45</span>", 
 
    " <span>5:00</span>", 
 
]; //adds the times instead of regular numbers. 
 
var voiceoverslider = [" <span>$100.00</span>", 
 
    " <span>$110.00</span>", 
 
    "<span>$120.00</span>", 
 
    "<span>$130.00</span>", 
 
    "<span>$140.00</span>", 
 
    "<span>$150.00</span>", 
 
    " <span>$160.00</span>", 
 
    " <span>$170.00</span>", 
 
    " <span>$180.00</span>", 
 
    " <span>$190.00</span>", 
 
    " <span>$200.00</span>", 
 
    " <span>$210.00</span>", 
 
    " <span>$220.00</span>", 
 
    " <span>$230.00</span>", 
 
    " <span>$240.00</span>", 
 
    " <span>$250.00</span>", 
 
    " <span>$260.00</span>", 
 
    " <span>$270.00</span>", 
 
    " <span>$280.00</span>", 
 
    " <span>$290.00</span>", 
 
    " <span>$300.00</span>", 
 
    " <span>$310.00</span>", 
 
    " <span>$320.00</span>", 
 
    " <span>$350.00</span>", 
 
    " <span>$380.00</span>", 
 
    " <span>$410.00</span>", 
 
    " <span>$440.00</span>", 
 
    " <span>$470.00</span>", 
 
    " <span>$500.00</span>", 
 
    " <span>$530.00</span>", 
 
    " <span>$560.00</span>", 
 
    " <span>$590.00</span>", 
 
    " <span>$620.00</span>", 
 
    " <span>$650.00</span>", 
 
    " <span>$680.00</span>" 
 
]; 
 

 
$('#sliderPrice').html(sizeRange[0]); 
 
    
 
$("#voiceover").on("change",function(){ 
 
    
 
}); 
 

 

 

 
$(document).on("change", '#range-slider', function() { //Listen to slider changes (input changes) 
 
    var v = $(this).val(); //Create a Variable (v), and store the value of the input change (Ex. Image 2 [imageURL]) 
 
    var q = $("#slider_count").val(); 
 
    var voiceovermain = ["<span>$0.00</span>", 
 
    voiceoverslider[0] 
 
    ]; 
 
    $('#sliderStatus').html(imageUrl[v]); 
 
    $('#sliderPrice').html(sizeRange[v]); 
 
    $('#voiceoverslider').html(sizeRange[v]); 
 
    
 
    //--------------------------------------------------------- 
 
    if($("#voiceover").is(":checked")){  
 
    $("#voiceoverspan").html(""); 
 
    $('#sliderPrice').clone().appendTo("#voiceoverspan"); 
 
    } else { 
 
    $('#voiceoverspan').html("$0.00"); 
 
    } 
 
//----------------------------------------------------------- 
 

 

 
    $("#img").prop("src", imageUrl[v]); // Modify the Images attribute src based on the sliders value, and input the value inside the imageURL[v] to display image 
 
}); 
 

 
// ::::: Range Slider Thumb ::::: // 
 

 
$("#range-slider").on("mousedown", function() { //1. When user clicks their mouse down on the Range-Slider 
 
    $(this).removeClass().addClass("thumb-down"); //1.1 Remove default class from CSS, and add the class .thumb-down (changes background color) 
 
    $(this).addClass("hover-ring"); //1.2 Remove default class from CSS, and add the class .hover-ring (changes box-shadow to a green color) 
 
}); 
 

 
$("#range-slider").on("mouseup", function() { //2. When user mouse-up on Range-Slider 
 

 
    $(this).addClass("thumb-up"); //2.1 Changes thumb color back to light green 
 

 
    $(this).addClass("hover-ring-out"); //2.2 Remove Box-Shadow 
 
});

#slider_count { 
 
    margin: 0px auto; 
 
    width: 200px; 
 
    padding: 20px 20px; 
 
    text-align: center; 
 
    background-color: yellow; 
 
} 
 

 

 
/* ::::::::::::::::::::Range Slider Styles::::::::::::::::::::::::: */ 
 

 
.range-slider-block { 
 
    margin: 0px auto; 
 
    width: 90%; 
 
} 
 

 
#range-slider { 
 
    padding: 40px 0px; 
 
    width: 100%; 
 
    /*outline: 1px solid green;*/ 
 
} 
 

 

 
/* Remove Range Sliders Default Styles*/ 
 

 
input[type=range] { 
 
    -webkit-appearance: none; 
 
} 
 

 

 
/* Track */ 
 

 
input[type=range]::-webkit-slider-runnable-track { 
 
    height: 10px; 
 
    background: #d7d7d7; 
 
    border: none; 
 
    border-radius: 6px; 
 
} 
 

 
input[type=range]:focus { 
 
    outline: none; 
 
} 
 

 

 
/* Thumb */ 
 

 
input[type=range]::-webkit-slider-thumb { 
 
    -webkit-appearance: none; 
 
    border: none; 
 
    height: 30px; 
 
    width: 30px; 
 
    border-radius: 50%; 
 
    background: #46947F; 
 
    margin-top: -9px; 
 
    transition: box-shadow 0.5s; 
 
} 
 

 
input[type=range]:hover::-webkit-slider-thumb { 
 
    box-shadow: 0 0 0 10pt rgba(190, 190, 190, 0.4); 
 
    cursor: pointer; 
 
} 
 

 

 
/* JS Stykes */ 
 

 

 
/* Changes Thumb color to darker green when mousedownn */ 
 

 
input[type=range].thumb-down::-webkit-slider-thumb { 
 
    background: #316557; 
 
} 
 

 

 
/* Changes Thumb color back to light green when mouseup */ 
 

 
input[type=range].thumb-up::-webkit-slider-thumb { 
 
    background: #46947F; 
 
} 
 

 

 
/* Changes Ring color Green */ 
 

 
input[type=range].hover-ring::-webkit-slider-thumb { 
 
    box-shadow: 0 0 0 6pt rgba(70, 148, 127, 0.46); 
 
    cursor: pointer; 
 
} 
 

 
input[type=range].hover-ring-out::-webkit-slider-thumb { 
 
    box-shadow: 0 0 0 0pt rgba(0, 0, 0, 0); 
 
    cursor: pointer; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form> 
 
    <div class="range-slider-block"> 
 
    <input type="range" id="range-slider" value="0.0" min="0" max="34" step="1" /> 
 
    </div> 
 

 
    <div id="slider_count">Time = <span id="sliderStatus">:10</span></div> 
 
    <br/> 
 
    <div id="slider_count">Subprice (Video Duration) = <span id="sliderPrice">$0.00</span></div> 
 
    <br/> 
 
    <label for="voiceover">Would you like a voiceover?</label> 
 
    <input type="checkbox" id="voiceover" name="voiceover" checked> 
 
    <div id="slider_count">Subprice (for voiceover): = <span id="voiceoverspan">$0.00</span></div> 
 
</form>