Javascript 我可以使用img src中的alt=值来填写订单中的项目#字段吗？_Javascript_Jquery_Html

Javascript 我可以使用img src中的alt=值来填写订单中的项目#字段吗？

javascript jquery html

Javascript 我可以使用img src中的alt=值来填写订单中的项目#字段吗？,javascript,jquery,html,Javascript,Jquery,Html,我试图找到一种非常简单的方法，让用户单击链接到订单的图片，并自动填写项目编号。说到html编码，我是个新手。我有一个订单链接只是需要一个很好的方式来自动填写基于用户点击图片的项目编号 Html网页 <section id="Desk"><H1>Desks</h1><h3>Click an image to claim the item</h3></section> <font size="4"><a hre

我试图找到一种非常简单的方法，让用户单击链接到订单的图片，并自动填写项目编号。说到html编码，我是个新手。我有一个订单链接只是需要一个很好的方式来自动填写基于用户点击图片的项目编号

Html网页

<section id="Desk"><H1>Desks</h1><h3>Click an image to claim the item</h3></section> <font size="4"><a href="file://csd1/Public/MandR/Order%20Form.htm">
<img src= "file://csd1/Public/MandR/InventoryPictures/InDatabase/1115.jpg" alt="1115" width="300" height="300">

desk单击图像以认领物品

订单

Please enter item #:
<input type="text" style= background-color:#BFC9CA name="Item#"><br>

请输入项目#：

您只需通过

addEventListener

向

img

元素添加一个点击事件监听器。如果您有多个映像，您可能应该实现某种类型的事件委派，这样只需添加一个事件处理程序即可处理所有

img

单击事件，而不必在每个

img

上添加事件侦听器。下面是我所描述内容的一个简单实现。我对您的代码做了一些修改，但没有做太多（添加了一些额外的图像，并删除了图像

src

属性URL:

const textEl=document.querySelector（“#textEl”）；
//将所有事件委派给父容器：
document.querySelector（“#imgContainer”）.addEventListener（'click'，函数（e）{
如果（e.target.tagName=='IMG'）{
textEl.value=e.target.alt；
}
e、 停止传播（）//
我试图找到一种非常简单的方法，让用户单击链接到订单的图片，并自动填写项目编号
建议阅读：
我假设订单和图片在同一页上（因为您没有指定）
让我们使用jQuery来获取单击
。为简洁起见，其他类似src
的内容将被排除在外
<img class="js-formfill-item" />
<img class="js-formfill-item" />
<img class="js-formfill-item" />
<div><input type="text" name="ItemNumber"></div>

我强烈建议不要使用。
我更喜欢尽可能糟糕地耦合我的jQuery，因此为了定位一个元素，我们只需添加一个属性，我更喜欢命名属性target
，以定位输入元素。此外，我会使用另一个数据属性来存储它的项目编号

$（文档）.ready（（）=>{
$（'.js formfill item'）。在（'click'，（e）=>{
//e.currentTarget将是已单击的html元素，该元素具有class.js formfill项
//我们用$（）包装它，以便与jQuery一起使用
var$this=$（e.currentTarget）；
var target=$this.data（'target'）；
var itemid=$this.data（'itemid'）；
$（目标）.val（项目ID）；
});
})；
使用数据-
属性比alt
更合适，因为alt
应用于解释图像未加载时的图像内容。添加以下jQuery应在单击图像时更新文本框
$(document).ready(() => {
  $('.js-formfill-item').on('click', (event) => {
  });
});

您的示例在进行少量语法更新后如下所示：
$('img').click(function(){
    var pictureId = $(this).data("pictureid");
   $('input').val(pictureId);
});


办公桌
单击图像以声明该项目
订单
请输入项目：



$（文档）.ready（函数（）{
$（'img'）。单击（函数（）{
var pictureId=$（this.data（“pictureId”）；
$（'input'）.val（pictureId）；
});
});
很抱歉，这是一个非常难看的编码。请告诉我是否还有其他方法可以帮助解决此问题。我只是尝试创建一个本地宿主网站，让员工查看可以重复使用的旧办公家具。我将研究使用查询参数传递ID:@JoelBrewer谢谢我会查看此项。订单是在e单击图像的同一页面？如果是..同一页面上是否也有其他项目？如果用户单击多个项目/图像怎么办？您可以这样做，但您可能希望使用ref=“1115”而不是alt属性，并使用img[ref=“1115”]将其作为目标。alt属性具有特定用途（）。
<!--If jQuery is not included add the following-->
<!--
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js></script>
</head>
-->

<section id="Desk">
   <h1>Desks</h1>
   <h3>Click an image to claim the item</h3>
</section> 

<font size="4">
<a href="file://csd1/Public/MandR/Order%20Form.htm"> 
<img src= "file://csd1/Public/MandR/InventoryPictures/InDatabase/1115.jpg" alt="inventory item" width="300" height="300" data-pictureid="115">

Order form
Please enter item #:<br />
<input type="text" style= background-color:#BFC9CA name="Item#"><br />

<script>
$(document).ready(function(){
    $('img').click(function(){
        var pictureId = $(this).data("pictureid");
       $('input').val(pictureId);
    });
});
</script>