在链接单击时显示图像，在外部单击时将其隐藏

Question

我试图在链接单击上显示图像，如果在外部单击，则隐藏该图像。 在尝试了许多解决方案之后，我想到了下面的代码。

<script>
    function setImageVisible(id, visible) {
        var img = document.getElementById(id);
        img.style.visibility = (visible ? 'visible' : 'hidden');
    }
</script>
<div id="wrapper" style="margin-top: -5px; text-align:center" align="center" onclick="javascript:setImageVisible('popup1', false)">
    <a href="javascript:setImageVisible('popup1', true)"><div id="Btn7"></div></a>
    <img id="popup1" class="img_popup1" src="../screenshots/pop-up.png" style="visibility:hidden" />
</div>

上面的代码工作正常。 但是，当我添加如下所示的其他图像时，它不起作用。 当我在外面单击时，图像不会隐藏。

<script>
    function setImageVisible(id, visible) {
        var img = document.getElementById(id);
        img.style.visibility = (visible ? 'visible' : 'hidden');
    }
    $(document).click(function() {
        var img1 = document.getElementById('popup1');
        var img2 = document.getElementById('popup2');
        img1.style.visibility = 'hidden';
        img2.style.visibility = 'hidden';
    });
</script>
<div id="wrapper" style="margin-top: -5px; text-align:center" align="center">

    <a href="javascript:setImageVisible('popup1', true)"><div id="Btn7"></div></a>
    <img id="popup1" class="img_popup1" src="../screenshots/pop-up.png" style="visibility:hidden" />
    <a href="javascript:setImageVisible('popup2', true)"><div id="Btn8"></div></a>
    <img id="popup2" class="img_popup2" src="../screenshots/pop-up2.png" style="visibility:hidden" />

</div>

谁能建议我该怎么办？

Answer 1

删除内联事件处理程序，并为常见的click事件编写代码，

1）为包装器ID中的所有标签绑定click事件，然后在单击链接时显示图像

2）绑定文档的click事件并在链接外部单击时隐藏所有图像

$("#popup1,#popup2").hide();
$("#Btn7,#Btn8").click(function (e) {
    e.stopPropagation();
    $(this).next().show();
})
$(document).click(function () {
    $("#popup1,#popup2").hide();
})

演示

Answer 2

当然，当您添加了标签jquery时 ，我要求您以这种简单方式进行操作：

片段：

 $(function () { $(".imgPreview").hide(); $(".unstyled li a").click(function () { $(".imgPreview").show().find("img").attr("src", $(this).attr("href")); return false; }); $("body").click(function () { $(".imgPreview").hide(); }); }); 

 * {font-family: 'Segoe UI'; margin: 0; padding: 0; list-style: none;} body {margin: 10px;} li {margin: 5px;} .unstyled, .imgPreview {float: left; width: 50%;} .unstyled, .imgPreview img {max-width: 100%;} p {margin: 5px;} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <p>Click on a link to show the respective image. Click outside to hide it!</p> <p>Also you can right click and open it to open the image in a new tab!</p> <ul class="unstyled"> <li><a href="http://placehold.it/350x150">350x150</a></li> <li><a href="http://placehold.it/750x150">750x150</a></li> <li><a href="http://placehold.it/350x150">350x150</a></li> <li><a href="http://placehold.it/100x100">100x100</a></li> <li><a href="http://placehold.it/350x150">350x150</a></li> </ul> <div class="imgPreview"> <img src="" alt="" /> </div> 

Answer 3

您不需要jQuery即可执行此操作。

 function setImageVisible(id, visible) { var img = document.getElementById(id); img.style.visibility = (visible ? 'visible' : 'hidden'); } function hideAll() { var img1 = document.getElementById('popup1'); var img2 = document.getElementById('popup2'); img1.style.visibility = 'hidden'; img2.style.visibility = 'hidden'; } function click(e) { e.stopImmediatePropagation(); var id, el = this; while (el) { el = el.nextSibling; if (el.nodeName === 'IMG') { // finds the next sibling img element id = el.id; el = null; } } hideAll(); // hide all images setImageVisible(id, true); // show the right one }; document.addEventListener('click', hideAll); var btns = document.querySelectorAll('.btn'), i = 0, len = btns.length; for (; i < len; i++) { btns[i].addEventListener('click', click); } 

 img { width: 100px; height: 100px; border: 1px solid black; } 

 <div id="wrapper" style="margin-top: -5px; text-align:center" align="center"> <div class="btn" id="Btn7">Image 1</div> <img id="popup1" class="img_popup1" src="../screenshots/pop-up.png" style="visibility:hidden" /> <div class="btn" id="Btn8">Image 2</div> <img id="popup2" class="img_popup2" src="../screenshots/pop-up2.png" style="visibility:hidden" /> </div> 

Answer 4

试试这个简单的演示

<!DOCTYPE html>
<html>
<head>
    <script src = "jquery-1.10.2.min.js"></script>
</head>
<body>
    <a href="#" id="imageLink">Click to show image</a>
    <img id="image" style="display:none;height:500px; width:500px;">   
    <script type="text/javascript">

        $('#imageLink').click(function (e){
            e.stopPropagation();
            $('#image').show();

        });

        $('body').click(function () {
            $('#image').hide();
        })
    </script>
</body>
</html>

Answer 5

    $(document).ready(function () {
        $("#linkbutton_id").click(function () {
            alert("The paragraph was clicked.");
            if($("#image").hide())
            {
                $("#image").show();
                 return false;
            }

        });
});


$(document).ready(function () {
$("#div_id").click(function(){

    $("#image").hide();
    });
});

代码加上输出链接https://jsfiddle.net/umxrn0Lg/2/

全屏输出链接https://jsfiddle.net/umxrn0Lg/3/embedded/result/