使用onClick on images显示文本

using onClick on images to display text

本文关键字：显示 文本 images on onClick 使用      更新时间：2023-09-26

我应该首先说，如果有这样的问题，我很抱歉，但我找不到确切的答案。

我对JavaScript还很陌生，但我想知道在使用if语句的函数中，如何发现是否单击了特定的图像（图像ID为1,2和3），然后在其下方显示适当的文本，以附加到前一段中。

这里的var（text1等）只有引号中的文本，所以它们很好，所以我想知道我能做些什么来更改这个代码，这样无论我点击什么样的图像，它都不会一直打印text1。

（尽管我认为这是由于读取到如果有ID，它就会打印出来，所以这就是为什么总是打印text1的原因）

代码被剪断。

最佳结构解决方案是：

HTML

<a href="javascript: changeText(1);">
   <img src="abc.jpg" alt="abc" />
</a>
<a href="javascript: changeText(2);">
   <img src="abc.jpg" alt="abc" />
</a>
<a href="javascript: changeText(3);">
   <img src="abc.jpg" alt="abc" />
</a>
<div id="div"></div>

Javascript

function changeText(value) {
    var div = document.getElementById("div");
    var text = "";
    if (value == 1) text += "this is one";
    if (value == 2) text += "this is two";
    if (value == 3) text += "this is tree";
    div.innerHTML = text;
}

document.getElementById（）将返回一个HTML元素作为变量。当您编写"if（）"语句时，将计算为false并跳过"if"的少数几项是：null、undefined、0和false。传入一个对象（如元素）将计算true并进入"if"内部。

很可能，这个脚本在事件侦听器中，对吗？应该向您传递一个MouseClickEvent对象，该对象将具有currentTarget属性。您可以检查currentTarget的ID并进行比较，或者将.currentTarget本身与使用getElementById检索的图像进行比较。希望一切都有意义！

由于您是javascript的新手，我将为您提供入门指南。你可能可以用这种方式

//first you can a call function on your every image like
<img onclick="changeText(1)" src="abc.jpg">
<img onclick="changeText(2)" src="def.jpg">
<img onclick="changeText(3)" src="efg.jpg">

<script type="text/javascript">
    function changeText(val)
    {
         var para = document.getElementbyID('para').innerHTML;
         if(val==1)
         {
             para += "Image One was Clicked";
         }
         else if(val==2)
         {
             para += "Image Two was Clicked";
         }
    }
</script>

我想向您介绍一种更简单的JS类型，jQuery

现在，如何使用代码，您需要有尽可能多的图像和一个div元素来显示内容。这里，试试这个：

<img src="link/to/file.png" alt="photo" id="1" />
<img src="link/to/file.png" alt="photo" id="1" />
<img src="link/to/file.png" alt="photo" id="1" />
<div id="div"></div>

现在您可以将jQuery添加为：

$('img').click(function () { // on a click
  if($(this).attr('id') == '1') { // get the id attribute
    $('#div').html('Image with 1 was clicked'); // write the text
  } else { // else if
     // write something else for the 2
  }
}

很简单，不是吗？只需更新点击事件的内容。

但是，如果您仍然想使用JS，那么下面是代码；只需为这些图像添加onclick事件处理程序。

<img src="link/to/file.png" alt="photo" id="1" onclick="showone()" />
<img src="link/to/file.png" alt="photo" id="1" onclick="showtwo()" />
<img src="link/to/file.png" alt="photo" id="1" onclick="showthree()" />
<div id="div"></div>

现在创建一个函数作为：

function showone () { // click on the first image
  var div = document.getElementById("div"); // get the div
  div.innerHTML = "Image with id 1 was clicked"; // change the text (inner html)
}
function showtwo () {
  /*
   * continue the work of the functions..
   */
}

但您需要确保ID存在。例如，对于您的代码

依此类推。

您只需检查document.getElementById("1")是否存在（如果我没有正确理解，那么您的页面中就有这样一个元素），这就是为什么您一直在传递该代码块。其他情况未经测试

我认为最好的是：

<div id="images">
    <img src="link/to/file.png" alt="photo" data-text="this is one" />
    <img src="link/to/file.png" alt="photo" data-text="this is two" />
    <img src="link/to/file.png" alt="photo" data-text="this is three" />
</div>
<div id="text"></div>

在jQuery中：

$('DIV#images img').click(function () {
    $('DIV #text').html($(this).data('text')));
});

我相信这是由于您在图像中使用的ID属性造成的。不能在ID或类的开头使用数字。

例如，以下代码将起作用：

<img src="animage.png" id="img1"/>

但这不会：

<img src="animage.png" id="1"/>
相关文章：