Jquery 范围滑块 - 根据输入值显示字符串文本 - Javascript 数组不起作用

Question

我正在尝试创建一个范围滑块，以直观地显示不同的打印横幅尺寸。我设置了一个数组来根据输入值显示横幅图像。这很好用。

我坚持的步骤是当我尝试根据 #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

我相信你已经接近解决它了。我更新了您的数组并设置了滑块价格 = 大小范围[v]。我还将初始值设置为 sizeRange[0]。

代码笔链接

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]);
});