Question

我有一个包含4个图像的页面和一个包含一些文本的div框。当我点击其中一个图像时，我希望文本更改为其他内容。

我的目标是能够点击每张图片并获取有关它们的信息，而无需在一个div中略微更改完全不同的HTML。

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

单击img链接以更改div中的文本

2 个答案: