时间戳

首页 > 解决方案 > Javascript - 单击时显示带有图像的文本

javascript - Javascript - 单击时显示带有图像的文本

问题描述

我刚开始使用 Javascript/HTML，我想知道如何创建一个页面，上面有 2 张图片，当您点击与该图片相关的图片文本时，会出现？我的图片如下：

<img class="thumb" data-ord="1"  onclick='changeMainImg(this);' src="full/01.jpg">

我的 changeMainImg 函数：

function changeMainImg1(that) {
  document.getElementById("fullview").src=that.src;
  current=that;}

我可以在函数中实现文本，以便两个不同的图像中的每一个都有自己的文本吗？

谢谢

标签： javascript

解决方案

有几种方法可以实现这一点。如果文本很短，您可以将其作为dataset属性添加到同一 img 标签中，如下所示：

<img class="thumb" data-ord="1" data-text="my text" onclick='changeMainImg(this);' src="full/01.jpg">

function changeMainImg1(that) {

    document.getElementById("fullview").innerHTML = that.dataset.text;
}

另一种方法是定义一个包含所有文本的变量并通过索引调用它：

<img class="thumb" data-ord="0" onclick='changeMainImg(this);' src="full/01.jpg">

var texts = [
    'text 1',
    'text 2'
];

function changeMainImg1(that) {

    document.getElementById("fullview").innerHTML = texts[that.dataset.ord];
}

推荐阅读