Question

所以，对于学校我必须做这个游戏。为此，我必须在单击图像时显示文本。我在一个按钮上试了一下，但看起来并不好看，所以我想在点击时看到一个隐藏的div图像。出于某种原因，我似乎无法使其发挥作用。

HTML code：

<!DOCTYPE html-->

<head>
    <title>crime scene</title>
    <link rel="stylesheet" href="crimescene.css" type="text/css" />
</head>

<body>

    <div id="img1">
        <img src="images/nummer2.png" alt="nummer2" data-hint="2" />
    </div>

    <div id="hint-1" class="hidden">Hint 1</div>

    <div id="img2">
        <img src="images/nummer3.png" alt="nummer3" data-hint="3" />
    </div>

    <div id="img3">
        <img src="images/nummer4.png" alt="nummer4" data-hint="4"/>
    </div>

    <div id="img4">
        <img src="images/nummer1.png" alt="nummer1" data-hint="1"/>
    </div>

    <div id="hint" class="hidden">this is a hint</div>
    <button id="button">Show element</button>

    <script src="crimescene.js"></script> 

</body>

JavaScript代码：

window.onload = function () {
    'use strict';

    var button = document.getElementById("button");
    var hint = document.getElementById("hint");

var showHint = function (event) {
    console.log(this);
     if data-hint === '1'
     hint.classList.toggle('hidden');
    };

var img = document.querySelectorAll('img');
    console.log(img);

for (var i = 0; i < img.length; i++) {
    img[i].addEventListener("click", showHint);
    };

function show(hint) {
    };

button.addEventListener('click', show);

};

点击图片后如何制作tekst节目？有人知道吗？？（我不能使用jQuery）

如何在图像上显示div

0 个答案: