Jquery Range Slider - 根據輸入值顯示字符串文本 - Javascript Array not working

Question

我試圖創建一個範圍滑塊，它可視化地顯示不同的打印橫幅大小。我有一個數組設置基於輸入值顯示橫幅圖像。這很好。

我堅持的步驟是當我嘗試顯示基於#sliderPrice內的輸入值的文本字符串。只要我嘗試創建第二個數組，代碼就會中斷。 （我有它在我的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]); 
});