gpt4 book ai didi

javascript - 根据在文本字段中输入的值更改 Img Src

转载 作者:行者123 更新时间:2023-11-30 10:41:29 25 4
gpt4 key购买 nike

我需要帮助创建包含以下内容的表单

  1. TEXTFIELD(将用于输入 7 位型号)
  2. 图像占位符(将根据 url 更改图像占位符的 src,例如它将变为 src="http://yourwebsite.com/product/TEXTFIELD.jpg)

  3. 我需要以某种方式从产品的 url 中获取 H1 标签值

#3 仍未解决!

非常渴望任何类型的帮助。我用谷歌搜索了一整天真的需要帮助。谢谢 !

我在下面有一些代码可以帮助可视化我正在寻找的东西。如果您需要澄清或者我有点困惑,请与我联系。

<form name="form1" method="post" action="">
<p>7-digit product#
<input type="text" name="model" id="model">
</p>
<p>
<input name="start" type="hidden" id="start" value="http://www.mywebsite.com/Products/">
</p>
<p>
<input name="end" type="hidden" id="end" value=".jpg">
</p>
<p><img name="proudctimage" src="=#start#model#end" width="32" height="32" alt=""></p>
</form>

<script>
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;
}
</script>

~编辑 2012 年 5 月 29 日上午 9:00~


  1. 如果您按回车键,在文本字段中输入的值将被删除
  2. 我需要一种方法来使用相应的 URL 获取存储在 H1 标签中的产品描述(该 URL 是在文本字段中输入的产品的型号,但使用的 url 结构略有不同,与过去使用的不同)抓取图片,见下文 ... http://mywebsite.com/ProductDetails.aspx?productid= 文本字段)***我应该注意,用于获取 H1 数据的 URL 将是一个“跨域”,不一定在某个域上。我读到 jquery 可能不会在跨域上发出请求

最佳答案

您可以使用 Jquery 轻松完成此操作。

http://www.jquery.com 中获取 Jquery 的副本或通过将其粘贴到您的头部部分来使用 CDN 版本:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

这是一个简化的版本:

如果您的 URL 的开始和结束部分不会改变,您可以简化您的表单:

​<form>
<label>Model Num</label>
<input type="text" name="model" id="model" />
<input type="button" value="Update Image" id="update" />
</form>
<img src="" />

然后使用以下 Jquery 代码,您可以检测到更新按钮的点击,从文本框中获取代码并将图像 src 属性更改为

http://mysite.com/products/typed_code_here

只需将 jquery 代码(和脚本标签)粘贴到您的 head 部分

<script>
​$(document).on('click','#update',function(){
$('img').attr('src','http://mysite.com/product/'+$('#model').val()+'.jpg');
});​​​​​​
</script>

如果您想在不使用 Jquery 的情况下执行此操作,并且如果您的 html 必须保持如上,则可以将以下内容与原始 html 一起使用(注意代码中的拼写错误):

<script>
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;
}
</script>

onkeyup 事件可以更改为模糊、更改等,具体取决于您希望如何更新图像。我建议使用一个按钮,以便用户在认为代码有效时可以更新图像。

更新

下面的github项目在jQuery跨域html请求的前端取得了进展。 https://github.com/padolsey/jQuery-Plugins/tree/master/cross-domain-ajax/

基本上您只需要通过 ajax (jQuery.ajax()) 获取产品页面,然后在 ajax 回调中您必须扫描返回的 HTML 以查找 h1 元素。最终,跨域 ajax 是一种设计模式,并且有与之相关的最佳实践。为了 h1 元素而抓取整个 HTML 页面并不是很有效。考虑修改您的方法,如果您引用的网站不是您自己的网站,请务必检查所有版权法/条款和条件。

关于javascript - 根据在文本字段中输入的值更改 Img Src,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10792207/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com