Question

因此，当您单击图像时，我必须使隐藏元素（div）可见。它工作在一个按钮上，但我似乎无法使它在图像上工作。

HTML code：

<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)

这是检查data-hint元素this元素（被点击的元素）的方法。

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

Answer 2

应该工作：

$("img").click(function(){
    $("div").show();
});

Answer 3

实际上你应该更新提示id：s，这样每个图像都有一个相应的提示，它们共享相同的id。所以第一个提示得到了“提示-1”的ID。

 <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>

    <style>
        .hidden {
            display: none;
        }

        .show {
            display: block;
        }

    </style>

    <div id="img4">
        <img src="/test/img2.jpg" alt="nummer1" data-hint="1"/>
    </div>

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

    <script type="text/javascript">
        window.onload = function() {
            var images = document.getElementsByTagName("img");


            for(var i=0;i<images.length;i++){
                images[i].onclick = function() {
                    var that = this;
                    var id = that.getAttribute("data-hint");
                    var hint = document.getElementById("hint-" + id);
                    hint.className = "show";
                };
            }



        };


    </script>

    </body>
    </html>

Answer 4

var showHint = function (event) {
    console.log(this);
    if(typeOf(hint) != 'null') hint.classList.toggle('hidden');        
};

如何显示div隐藏在img上的内容

4 个答案: