Question

我非常喜欢javascript，很抱歉这个非常基本的问题：所以我一直在环顾四周，但没有找到这个非常简单的问题的答案（我坚信它并不难，但无法弄清楚为什么我的代码不起作用）。所以我尝试在点击其他图像后显示图像。这类似于单击图片然后放大图片同时使背景变暗时发生的情况。我的方法是在div容器中有一个img，其中div容器将位于页面顶部。 div容器将具有display：none属性，我将使用javascript获取div ID并将display：none设置为：block。然而，我偶然发现了一些我不知道的事情，使我的代码无效。希望有人能帮助我找到我不知道的问题。

这是我的代码：

HTML

enter <!DOCTYPE html>
<head>
    <?php
    header('Content-Type:text/html;Charset=UTF-8');
    ?>
    <title> Western Drive - Driving Changes </title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script src="jquery-1.10.2.min.js"></script>
    <link rel="stylesheet" href="stylesheet.css" type=text/css>
    <link rel="stylesheet" href="testing.css" type=text/css>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10/jquery.min.js">
</head>
<body>
    <script>
        window.onload=function(){
        function preview(arg1)
        {
        document.getElementById("img1").style.display='block';
        document.getElementById("img1").src = arg1+'_Drawing.jpg';
        }
    }

</script>

<div id ="preview_image" style="display:none;">
<img id ="img1" src="Pictures/Product/SingleSpeedReducer/WPA_Drawing.jpg">
</div>
<div id="container">
    <?php include("header.php");?>
    <?php include("menu.php");?>
    <h2 id=Sub_title> Single Speed Reducer </h2>

<!----------------------------------put the content----------------------------- here-->
<div id=box style="border-top:solid 1px black ; border-bottom:solid 1px black">
<div id=pic_model><img src="Pictures/Product/SingleSpeedReducer/SingleReducer.jpg"></img></div><!-- div for pic_model-->
<div id=pic_selector><img src="Pictures/Product/SingleSpeedReducer/WPA.jpg"></img>  </div>
    <div id=pic_selector><img src="Pictures/Product/SingleSpeedReducer/WPDA.jpg" onclick="preview('Pictures/Product/SingleSpeedReducer/WPDA')"></img></div>
    <div id=pic_selector><img src="Pictures/Product/SingleSpeedReducer/WPDKA.jpg"></img></div>
    <div id=pic_selector><img src="Pictures/Product/SingleSpeedReducer/WPDKS.jpg"></img></div>
    <div id=pic_selector><img src="Pictures/Product/SingleSpeedReducer/WPO.jpg"></img></div>
    <div id=pic_selector><img src="Pictures/Product/SingleSpeedReducer/WPDO.jpg"></img></div>
    <div id=pic_selector><img src="Pictures/Product/SingleSpeedReducer/WPX.jpg"></img></div>
    <div id=pic_selector><img src="Pictures/Product/SingleSpeedReducer/WPDX.jpg"></img></div>
    <div id=pic_selector><img src="Pictures/Product/SingleSpeedReducer/WPKA.jpg"></img></div>
    <div id=pic_selector><img src="Pictures/Product/SingleSpeedReducer/WPDKA.jpg"></img></div>
    <div id=pic_selector><img src="Pictures/Product/SingleSpeedReducer/WPKS.jpg"></img></div>
    <div id=pic_selector><img src="Pictures/Product/SingleSpeedReducer/WPDKS.jpg"></img></div>
</div><!-- div untuk box-->
<!----------------------------------end the content----------------------------- here-->
<?php include("selector.php");?>
<div class="push"></div>
</div><!--div for container-->
    <?php include("footer.php");?>
</body>


CSS

#preview_image{ position:absolute; 
width:53%; 
height:70%; 
margin:12% 10% 10% 25%; 
border:solid 3px red; 
z-index:1;}

#preview_image img{
max-height:100%;
max-width:100%;
margin:0% 0% 0% 0%;
}
#preview_image onclick{
max-height:100%;
max-width:100%;
margin:0% 0% 0% 0%;
}

当我尝试点击img WPDA时，它应该更改display：none到display：block，但没有任何反复...

Answer 1

从window.onload函数中取出函数定义。名称preview的范围仅是函数体，因此无法从寻找全局函数的onclick处理程序引用它。另外，正如在其他答案中指出的那样，您设置了错误元素的display样式，它应该是preview_image。

<script>
    function preview(arg1)
    {
    document.getElementById("preview_image").style.display='block';
    document.getElementById("img1").src = arg1+'_Drawing.jpg';
    }
</script>

Answer 2

我不会手工解析你的代码并解决它的每一个潜在问题，但是有一个明显的错误。该错误与范围有关。范围意味着变量和函数的可见性。范围有两种类型：全局范围和功能范围。函数内声明的变量和函数仅在该函数的范围内可见。

让我们看看你声明处理程序函数的位置：

window.onload=function(){
    function preview(arg1)
    {
    document.getElementById("img1").style.display='block';
    document.getElementById("img1").src = arg1+'_Drawing.jpg';
    }
}

你看到了问题吗？函数preview仅存在于匿名函数的范围内。稍后你调用它：

<img src="Pictures/Product/SingleSpeedReducer/WPDA.jpg" onclick="preview('Pictures/Product/SingleSpeedReducer/WPDA')">

但是，现在，您正在全局范围内调用它。但preview在全局范围内不存在，因此不会运行任何内容。您可能会在浏览器控制台中收到错误。例如，如果您使用的是Chrome，则会看到“ReferenceError：未定义预览”。

最简单的解决方案就是从onload处理程序中取出函数声明。它不需要在那里，因为声明本身不需要等到页面加载。如果要查找绑定函数的元素，它只需要等待。由于您的绑定实际上是在onclick属性中完成的，因此无需等待DOM准备就绪。

这段代码很可能（没有承诺）起作用：

function preview(arg1)
{
    document.getElementById("img1").style.display='block';
    document.getElementById("img1").src = arg1+'_Drawing.jpg';
}

Answer 3

您必须设置div显示，而不是图像

document.getElementById("img1").style.display='block';

变为：

document.getElementById("preview_image").style.display='block';

修改

Barmar的回答完成了游戏; - ）

编辑＃2：

全部改变：

<div id=pic_selector>

要

<div class="pic_selector">

然后关闭图片标记：

<img id="img1" src="Pictures/Product/SingleSpeedReducer/WPA_Drawing.jpg"></img>

然后将您的功能更改为：

preview = function(arg1){ document.getElementById("preview_image").style.display='block'; document.getElementById("img1").src = arg1+'_Drawing.jpg'; }

将onclick从图像移动到div，例如：

<div class="pic_selector" onclick="preview('Pictures/Product/SingleSpeedReducer/WPDA')"> <img src="Pictures/Product/SingleSpeedReducer/WPDA.jpg"></img> </div>

Answer 4

更改此行

document.getElementById("img1").style.display='block';

到

document.getElementById("preview_image").style.display='block';

因为隐藏了preview_image而不是它的内容。

尝试更改显示属性时，javascript函数不会生效

4 个答案: