单击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');