css - 使用 onclick 更改 div 中的价格

Question

我有 2 张图片，当我点击其中一张图片时，我希望显示价格，我已经完成了以下操作：

<td style="padding-top: 2px; text-align: center" onclick="document.getElementById('price').firstChild.nodeValue=this.options[this.selectedIndex].getAttribute('data-price')"></td>

<img src="images/4.png" width="39" height="33" data-price="£245.00">
<img src="images/n4s.png" width="39" height="33" data-price="£255.00">

<div id="price"> </div>

Answer 1

它与@heidi answer类似，但更简单

<script type="text/javascript">
    function showprice(e){
        document.getElementById("price").innerHTML = e.getAttribute('data-price');
    }
</script>

    <img src="http://i.imgur.com/JnUKx.jpg" id="img1" onclick="showprice(this);" width="39" height="33" data-price="245.00">
    <img src="http://i.imgur.com/c8Rwp.gif" id="img2" onclick="showprice(this);" width="39" height="33" data-price="255.00">

    <div id="price" style="padding-bottom:10px"></div>​

您可以在jsFiddle中检查这一点。

您可以在这里使用 jQuery，而不是纯 javascript。这将使实施变得更加容易。

Answer 2

这应该有效：

<script type="text/javascript">
function showprice1(){
    var price_div = document.getElementById("price")
    var price1 = document.getElementById("img1")
    price_div.innerHTML = price1.getAttribute('data-price');
}
function showprice2(){
    var price_div = document.getElementById("price")
    var price2 = document.getElementById("img2")
    price_div.innerHTML = price2.getAttribute('data-price');
}
</script>

<img src="images/4.png" id="img1" onclick="showprice1();" width="39" height="33" data-price="£245.00">
<img src="images/n4s.png" id="img2" onclick="showprice2();" width="39" height="33" data-price="£255.00">

<div id="price" style="padding-bottom:10px"></div>​

在这里演示：http: //jsfiddle.net/fxUpM/