Javascript图像显示inputbox中的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标签。输入的“总计”应该能够显示所有点击的图像(产品)的总价格。

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

问候

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");
}