根据在文本字段中输入的值更改Img Src
我需要帮助创建一个包含以下内容的表单
- TEXTFIELD （将用于输入7位数模型号）
-
图像占位符（将根据url更改图像占位符的src，例如它将变为src =“http://yourwebsite.com/product/ TEXTFIELD .jpg）
-
我需要以某种方式从产品的url中获取H1标记值
＃3仍然没有解决！
我真的很想要任何类型的帮助。 我用Google搜索了一整天真的需要帮助。 谢谢 ！
我在下面有一些代码可以帮助想象我正在寻找什么。 如果您需要澄清或者我有点困惑，请与我联系。
var model_input = document.getElementById('model'); var start = document.getElementById('start'); var end = document.getElementById('end'); var image = document.getElementsByTagName('img'); model_input.onkeyup = function(e){ image[0].src = start.value + model_input.value + end.value; } 〜编辑9:00 AM 5/29 / 12~
- 如果按Enter键，则会删除在文本字段中输入的值
- 我需要一种方法来使用相应的URL获取存储在H1标签中的产品描述（URL是在文本字段中输入的内容的型号，但是使用与用于抓取图像的URL结构不同的url结构，见下文… http://mywebsite.com/ProductDetails.aspx?productid= TEXTFIELD ）***我应该注意，用于获取H1数据的URL将是“跨域”而不一定是某些域。 我读到jquery可能不会在跨域提出请求
您可以使用Jquery轻松完成此操作。
从http://www.jquery.com获取 Jquery的副本或使用CDN版本将其粘贴到您的头部：
这是一个简化版本：
如果您的url的开头和结尾部分不会更改，您可以简化您的表单：
![]()
然后使用以下Jquery代码，您可以检测到更新按钮上的单击，从文本框中获取代码并将图像src属性更改为
http://mysite.com/products/typed_code_here
只需将jquery代码（和脚本标记）粘贴到您的head部分即可
如果你想在没有Jquery的情况下这样做，如果你的html必须保持如上，你可以使用以下内容和原始的html（注意代码中的拼写错误）：
根据您想要更新图像的方式，onkeyup事件可以更改为模糊，更改等。 我建议一个按钮，以便用户在认为代码有效时可以更新图像。
更新
以下github项目使用jQuery在跨域html请求的前端取得了进展。 https://github.com/padolsey/jQuery-Plugins/tree/master/cross-domain-ajax/
基本上你只需要通过ajax（jQuery.ajax（））获取产品页面，然后在ajax回调中你必须扫描返回的HTML中的h1元素。 最终跨域ajax是一种设计模式，并且存在与之相关的最佳实践。 为了h1元素而抓取整个HTML页面并不是很有效。 考虑修改您的方法，如果您引用的网站不是您自己的网站，请务必查看任何版权法律/条款和条件。
如果你使用jquery，你可以这样做：
$(function () { $('#model').change(function () { $('img[name="productimage"]').attr('src', $('#start').val() + $('#model').val() + $('#end').val()); }); });
在你的HTML中采取一个隐藏的div 。 假设
$('#model').blur(function () { var modelVal = $.trim(this.value), startVal = $.trim($('#start').val()), endVal = $.trim($('#end').val()); if( modelVal && startVal && endVal) { var imgUrl = startVal + modelVal + endVal, siteUrl = startVal + modelVal; $('img[name="productimage"]') .attr('src', ); // process to get h1 tag $('#loadSource').load(''+ siteUrl +' h1', function() { console.log( $('#loadSource h1').text() ); }); } });