Jquery Range Slider - 入力値に基づいて文字列を表示する - Javascript配列が機能しない

Question

異なる印刷バナーサイズを視覚的に表示する範囲スライダを作成しようとしています。入力値に基づいてバナー画像を表示するように配列を設定しました。これは素晴らしいです。

私が取り組んでいるステップは、#sliderPriceの入力値に基づいてテキストの文字列を表示しようとするときです。 2番目の配列を作成しようとするとすぐにコードが壊れます。 （私はそれを私のcodepenでコメントしました）

誰かが私が間違っていることを知っていますか、sliderPrice div内の文字列を表示するという目標をどのように達成できましたか？理想的には、CSSを使用して文字列のスタイルを設定し、それを配置することができます。

https://codepen.io/stinkytofu3311/pen/ybBpYL?editors=1010

var sizeRange = new Array(); 

     size[0] = "11x17 - Starting Price <span>$19.99</span>"; 

     size[1] = "24x36 - Starting Price <span>$29.99</span>"; 

     size[2] = "70x90 - Starting Price <span>$39.99</span>"; 

     size[3] = "120x50 - Starting Price <span>$49.99</span>"; 

     size[4] = "67x18 - Starting Price <span>$59.99</span>"; 

     size[5] = "19x30 - Starting Price <span>$69.99</span>"; 

$(document).on('input 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]) 

    $('#sliderStatus').html($(this).val()); 
    $('#sliderPrice').html($(this).val()); 

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

あなたは、私は信じてそれを解決するに近かったです。あなたの配列を更新し、sliderPrice = sizeRange [v]を設定しました。私はまた、初期値をsizeRange [0]に設定しました。素晴らしいことだ

CodePen Link

var sizeRange = ["11x17 - Starting Price <span>$19.99</span>", 
     "24x36 - Starting Price <span>$29.99</span>", 
     "70x90 - Starting Price <span>$39.99</span>", 
     "120x50 - Starting Price <span>$49.99</span>", 
     "67x18 - Starting Price <span>$59.99</span>", 
     "19x30 - Starting Price <span>$69.99</span>"] 

$('#sliderPrice').html(sizeRange[0]); 

$(document).on('input change', '#range-slider', function() { 
    var v=$(this).val(); 

    $('#sliderStatus').html($(this).val()); 
    $('#sliderPrice').html(sizeRange[v]); 

    $("#img").prop("src", imageUrl[v]); 
});