通过单击HTML中的图像获取文本的建议

<!doctype html> 
<html lang="en"> 
<head> 
    <title>Main Page</title> 
    <meta charset="utf-8"> 
</head> 
<body> 
<script> 
function myFunction() { 
    document.getElementById("1").innerHTML = "hi"; 
} 
//function getImage() { 
    //var img1 = document.getElementById("1").addEventListener('click', onClick()); 
//} 

</script> 
<p> 
<img id="1" src="hamster.jpg" onclick="myFunction()"> 
<img id="2" src="fish.jpg"> 
<img id="3" src="dog.jpg"> 
<img id="4" src="fries.jpg"> 
<img id="5" src="pop.jpg"> 
</p> 
</body> 
</html>

这是迄今为止我所拥有的。我试图让图片在点击后显示。我试图将图像链接到JavaScript函数，然后让它获得元素ID并给出文本。有人有建议吗？我是否正确地尝试这种方式？到目前为止它没有任何回报。通过单击HTML中的图像获取文本的建议

来源

2014-09-20 miloJ

'img'是一个空元素，innerHTML什么也不做。您必须为您的图像下的文本准备一些占位符。 – 2014-09-20 19:03:03

如果我理解了你，你想在文本中替换那个图片？如果这样加：

<div id="targetId"> 
    <img id="1" src="hamster.jpg" onclick="myFunction()"> 
</div>

，并在你的JavaScript功能用途：

function myFunction() { 
    document.getElementById("targetId").innerHTML = "hi"; 
}

如果你想使文本显示附近图像使用：

<p> 
    <img id="1" src="hamster.jpg" onclick="myFunction()"> 
    <div id="targetId"></div> 
    <img id="2" src="fish.jpg"> 
    <img id="3" src="dog.jpg"> 
    <img id="4" src="fries.jpg"> 
    <img id="5" src="pop.jpg"> 
</p>

来源

2014-09-20 19:07:09 tomer

我其实想要点击图片时文字出现，而不是替换图片... – miloJ 2014-09-20 19:26:07

我编辑了我的答案 – tomer 2014-09-20 19:31:07

如果我想要它，如果我点击一个图片文字会出现，然后当我点击另一个图片时文本会消失，第二个图像文本会出现，我需要更多的JavaScript？ – miloJ 2014-09-20 19:40:39

function myFunction() { 
 
    document.getElementById("text").innerHTML = "hi"; 
 
}

<div id="a1" onclick="myFunction()"><img id="a" src="hamster.jpg" "></div> 
 
<div id="text"></div> 
 
<img id="b" src="fish.jpg"> 
 
<img id="c" src="dog.jpg"> 
 
<img id="d" src="fries.jpg"> 
 
<img id="e" src="pop.jpg">

你应该将你的图像包裹在div中。不要只用一个数字来命名你的ID。

来源

2014-09-20 19:07:51

我会推荐使用jquery来帮助你解决这个问题。通过这种方式，您可以找到所有相关图像，设置点击并以正确的方式轻松添加所需的文本。以下是一个完整的示例工作示例：

<!doctype html> 
<html lang="en"> 
<head> 
    <title>Main Page</title> 
    <meta charset="utf-8"> 

    <script type='text/javascript' src='//code.jquery.com/jquery-1.9.1.js'></script> 
</head> 
<body> 
    <p> 
    <img id="1" src="hamster.jpg" /> 
    <img id="2" src="fish.jpg" /> 
    <img id="3" src="dog.jpg" /> 
    <img id="4" src="fries.jpg" /> 
    <img id="5" src="pop.jpg" /> 
    </p> 

    <script type='text/javascript'> 
     // find all <img>s inside a <p> and set up onclick 
     $('p img').on('click', function() { 
      // add the text after the clicked element 
      $(this).after('hi'); 
     }); 
    </script> 
</body> 
</html>

来源

2014-09-20 19:12:12 Rhumborl

如果我只想要图像下方的文本，而不是它取代图像？ – miloJ 2014-09-20 19:15:56

这不会取代图像，它只是在图像后添加新的文字。你可以在这里看到它的行动：http://jsfiddle.net/jj00x7dw/ – Rhumborl 2014-09-20 19:18:04

当我在浏览器中运行该代码来测试它没有得到的文字。 – miloJ 2014-09-20 19:22:50

通过单击HTML中的图像获取文本的建议

回答

相关问题