Javascript onclick图像在输入框中显示alt-tag

Question

我收到了一个关于带有图像的 onclick 事件的基本问题。 我有四个图像是有价格的产品。价格在 Alt 标记中（为简单起见，现在全部 100）。请参阅下面的 HTML：

<img src="product1.png" alt="100" onclick="pricecheck();" id="product1" />
<img src="product2.png" alt="100" onclick="pricecheck();" id="product2" />
<img src="product3.png" alt="100" onclick="pricecheck();" id="product3" />
<img src="product4.png" alt="100" onclick="pricecheck();" id="product4" /> <br />

<label for="Price" >Price:</label><input type="text" name="price"/><br />            
<label for="totaal">Total:</label><input type="text" name="total"/>

我只是不知道如何制作一个功能，当您单击图像时，该功能将在输入“价格”中显示 alt-tag。输入“total”应该能够显示被点击的所有图片（产品）的总价。

我希望你们能帮我解决这个问题。

问候

Answer 1

使用jQuery，编辑你的html成为（添加一个'id'参数）：

<img src="product1.png" alt="100" onclick="pricecheck(1);" id="product1" />
<img src="product2.png" alt="100" onclick="pricecheck(2);" id="product2" />

你的 jQuery 函数：

function pricecheck(id){
   $('input[name="price"]').val($('img#product' + id).attr('alt'));
}

使用纯 JavaScript。

首先编辑您的输入标签：<input type="text" name="price" id="price" />

function pricecheck(id){
   var img = document.getElementById('product' + id);
   document.getElementById('price').value = img.getAttribute("alt");
}