Javascript打开iframe并隐藏图像？

Question

我正在尝试单击打开 iframe 并隐藏图像。 关于为什么这不起作用的任何帮助都会很棒！ 谢谢

<!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <title>test</title>
</head>

<body>

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $('#button').click(function () {
                if (!$('#iframe').length) {
                    $('#iframeHolder').html('<iframe id="iframe" src="http://www.test.com" width="100%" height="700"></iframe>');
                    document.getElementById('loadingimage').style.visibility = 'hidden';
                }
            });
        });
    </script>

    <div id="button"><img id "loadingimage"class="alignnone size-full wp-image-2077" src="https://www.test.jpg"
            alt="test image" width="860" height="474" /></div>
    <div id="iframeHolder"></div>

</body>

Answer 1

几点：

正如@stud3nt 所指出的，您的 HTML 无效。 "loadingimage"和class之间也缺少一个空格。 您应该使用高亮显示 HTML 和 JavaScript 语法错误的编辑器。
使用正确的 HTML 元素来完成正确的工作。 如果你想要一个按钮，那么使用<button>元素而不是<div>元素。
将图像隐藏在具有visibility: hidden的“按钮”内visibility: hidden是一件奇怪的事情。 这不会删除按钮元素，所以它仍然存在并且仍然可以被点击。 了解visibility: hidden和display: none之间的区别。 当您使用 jQuery 时，您可以使用.hide()并且您应该在“按钮”本身而不是其内容上使用它。
jQuery 1.6.0 是古老的。 要么使用当前版本，要么更好，根本不使用 jQuery。 对于一个 jQuery 不再是真正必要的，并且作为初学者，您应该学习如何编写纯 JavaScript。

Answer 2

您的img html 元素中有错字。
您忘记在<img id "loadingimage" ...添加= <img id "loadingimage" ...
正确的代码- <img id="loadingimage" ...

Javascript打开iframe并隐藏图像？

问题描述

2 个解决方案

解决方案1
1 2019-12-06 09:01:58

解决方案2
0 2019-12-06 08:32:59

Javascript打开iframe并隐藏图像？

问题描述

2 个解决方案

解决方案1 1 2019-12-06 09:01:58

解决方案2 0 2019-12-06 08:32:59

解决方案1
1 2019-12-06 09:01:58

解决方案2
0 2019-12-06 08:32:59