Question

我正在一个网站上工作，客户可以点击各种按钮并将文本输入表格，产品图像也会发生变化。他们还可以通过滑块查看产品的多个视图。

我需要能够从表单字段中获取输入，并使用输入替换调用产品图像的部分URL。我已经包含了我正在使用的代码的jsfiddle。

http://jsfiddle.net/Jaysenedwinward/4pu2k4m3/1/

<div id="productimage">
<img id="vignette" src="http://scene7.website.com/layer/decal&src=ir{vignette=012345&color=678910&pos=1&show}" 
width="300" alt="slider images"/>
</div>
<div id="spinner">
<input type="range" name="slider" id="slider" value="180" min="0" max="370" step="45"/>
</div>

在'src'中我希望能够使用不同形式的输入来改变'vignette'，'color'的数字。我更喜欢滑块能够在URL中更改值'pos'，因此滑块的当前值在URL中用作位置而不是表单。

你可以帮助我吗？

Answer 1

更新

这个小提琴似乎已经消失了。 :(

如果您使用的是jQuery，这非常简单。您需要做的就是在文档就绪中为该表单输入分配onChange事件。

然后更改img元素的.prop('src', value)。

$("#myInput").on('change', function() {
    var inputValue = $(this).val();
    var linkModified = "http://scene7.website.com/layer/decal&src=ir{vignette="+inputValue+"&color=678910&pos=1&show}";
    $("#vignette").prop('src', linkModified);
});

Answer 2

使用JavaScript，您可以从输入字段中获取值。根据这些值，您可以将源字符串放在一起。

var sliderValue = document.getElementById('slider').value;
var colorValue = document.getElementById('color').value;

var srcString = "http://yourwebsite.com/?color=" + colorValue + "&slider=" + sliderValue;

document.getElementById('vignette').attr('src', srcString);

如何使用表单输入更改URL的一部分？

2 个答案:

更新