javascript - 如何显示 div 上隐藏的内容

Question

因此，当您单击图像时，我必须使隐藏元素(div)可见。 它适用于按钮，但我似乎无法使其适用于图像。

HTML 代码:

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

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

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'
     hint1.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);

<小时/>

你看到了吗？它适用于按钮，但由于某种原因我无法使其适用于图像。

Answer 1

我注意到您没有使用 jQuery。您可能想研究一下它，因为它会使您尝试实现的内容变得更容易且更具可读性。

但无论如何:

hint1.classList.toggle('hidden');

应该是

hint.classList.toggle('hidden');

另外，

if data-hint === '1'

需要

if (this.dataset.hint == 1)

这是检查 this 元素(被单击的元素)的 data-hint 属性的方法。

http://jsfiddle.net/gunderjt/t46ws/