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

    <init-param>
        <param-name>contextConfigLocation</param-name>
        <param-value>classpath:ApplicationContext.xml</param-value>
    </init-param>

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

1 个答案: