Question

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

我对JavaScript很陌生，但我想知道在使用if语句的函数中，如果单击特定图像（图像ID为1,2和3），可以找出它，然后在其下方显示相应的文本附加到上一段。

这里的var（text1等）只有引号中的文字，所以它们很好，所以我想知道如何更改这段代码，这样无论什么样的图像，它都不会继续打印text1我点击了。

（虽然我认为这是因为它被读取，如果有一个ID，它只是打印它，所以这就是为什么text1始终打印）

代码已剪断。

Answer 1

最佳结构解决方案是：

<强> 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;
}

Answer 2

document.getElementById（）将返回一个HTML元素作为变量。当您编写“if（）”语句时，评估为false并跳过“if”的一些内容包括：null，undefined，0和false。传入一个对象（如元素）将评估true并进入“if”。

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

Answer 3

由于您不熟悉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>

Answer 4

我想转发一个更简单的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存在。例如，对于您的代码

等等..

Answer 5

您只需检查document.getElementById("1")是否存在（如果我理解正确，您的页面中有这样的元素），这就是您继续浏览该代码块的原因。其他案例未经过测试

Answer 6

我相信这是由于您用于图片的ID属性而发生的。您不能在ID或类的开头使用数字。

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

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

但这不会：

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

Answer 7

我认为最好的是：

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

使用onClick图像显示文本

7 个答案: