單擊img鏈接以更改div中的文本

Question

我有一個包含4張圖片的頁面和一個包含一些文本的div框。 當我單擊其中一張圖像時，我希望文本更改為其他內容。

我的目標是能夠單擊每張圖像並獲取有關它們的信息，而無需做一個完全不同的HTML，而只是在一個div中稍作更改。

<script type="text/javascript">
function changeText(){
document.getElementById('MyDiv').innerHTML = 'New Text';}
</script>

<a href="#"><img src="images/about.jpg" onClick="changeText()"></a>
<div class ="text" id="MyDiv"><p>Welcome blabla</p></div>

這是我一直在努力使之起作用的代碼，但沒有奏效。 我也想用Javascript編寫代碼。

Answer 1

您是說有關圖像本身的信息嗎？ 例如，如果您想要src的值或title或其他屬性，則可以執行以下操作：

<script type="text/javascript">
    function changeText(obj){

        var div=document.getElementById('MyDiv');
        div.innerHTML='';

        var p=document.createElement('p');
        p.appendChild(document.createTextNode(obj.title + ' '+ obj.src));

        div.appendChild(p);

    }
</script>

<img src="images/about.jpg" title="About Something" onclick="changeText(this)" style="cursor: pointer;" />

<div class="text" id="MyDiv">
    <p>Welcome blabla</p>
</div>

p標簽將被覆蓋以包括圖像的標題和src（在此示例中）

Answer 2

使用jQuery HTML函數

$('myImgClass').html('myText');