Jquery Range Slider - 根据输入值显示字符串文本 - Javascript数组不起作用

Question

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

我坚持的步骤是当我尝试根据#sliderPrice 中的输入值显示一串文本时。一旦我尝试创建第二个数组，代码就会中断。 （我已经在我的代码笔中注释掉了）

有谁知道我做错了什么，以及如何实现在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]);
});