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

删除内联事件处理程序并写入常见的单击事件

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

2）绑定文档的click事件，并在链接外部

时隐藏所有图像

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

<强> DEMO

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来执行此操作。

<div id="main">
    <div id="element"></div>
    <div id="text">HELLO</div>
</div>

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;
}

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/

在链接上显示图像单击并在外部单击时隐藏它

5 个答案: