0

私は2つの画像を持っています、これらの画像の1つをクリックすると、価格を表示したいのですが、次のようになりました。

<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>
4

2 に答える 2

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で確認できます。

ここでは、純粋なjavascriptの代わりにjQueryを使用できます。実装がはるかに簡単になります。

于 2012-09-21T03:09:38.793 に答える
0

これは機能するはずです：

<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/

于 2012-09-21T02:12:03.867 に答える