Question

我有一个关于带图像的onclick事件的基本问题。我有四张图片是有价格的产品。价格在Alt-tag中（为简单起见，现在全部为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"/>

我只是不知道如何在单击图像时创建一个在输入“price”中显示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");
}

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

1 个答案: