Question

我正在尝试编写一个照片库页面，其中有下方照片的小图标，当您点击它们时，它们会放大到主照片屏幕。只是我在试图让javascript做我想做的事情时遇到了麻烦。有人可以帮帮我吗？

到目前为止，这是我的代码：

<?php
                $host = "localhost";
                $user = "root";
                $pwd = "";
                $db_name = "gallery";

                mysql_connect($host, $user, $pwd)or die("cannot connect"); 
                mysql_select_db($db_name)or die("cannot select DB");


                $sql = mysql_query("SELECT * FROM foto ORDER BY id DESC LIMIT 10");
                $id = 'id';
                $foto = 'foto';


                while ($rows = mysql_fetch_assoc($sql))
                {
                    echo "<img class='littleshow'"."id='foto".$rows[$id]."'src='".$rows[$foto]."' onclick='Bigscreen(foto".$rows[$id].")'></img>";
                } //the onclick generates onclick="bigscreen(foto1)" and does this again 4 times on the other objects generating foto1,foto2,foto3,foto4
                ?>
                <div id='bigshowcase'></div>

到目前为止

和我的Javascript：

function Bigscreen () {      
        var div0 = document.getElementById('bigshowcase');

        var images = new array();
        images[0] = div0.style.backgroundImage = "url(pic/camera.jpg)";
        images[1] = div0.style.backgroundImage = "url(pic/dsc_4255.jpg)";
        images[2] = div0.style.backgroundImage = "url(pic/dsc_4373.jpg)";
        images[3] = div0.style.backgroundImage = "url(pic/dsc01209.jpg)";

        foto1 = images[0]
        foto2 = images[1]
        foto3 = images[2]
        foto4 = images[3]
}

我对javascript知之甚少，所以大部分内容可能都是错误的。谢谢你的帮助:)。

Answer 1

替换此行：

echo "<img class='littleshow'"."id='foto".$rows[$id]."'src='".$rows[$foto]."' onclick='Bigscreen(foto".$rows[$id].")'></img>";

用这个：

echo "<img class='littleshow'"."id='foto".$rows[$id]."'src='".$rows[$foto]."' onclick='Bigscreen(this)'></img>";

并将Bigscreen功能更改为：

function Bigscreen(img) {
    document.getElementById('bigshowcase').innerHTML ='<img src="' + img.src + '" />';
}

CSS：

<style type="text/css">
#bigshowcase img{max-width:600px;max-height:600px;}
</style>

希望有所帮助。

修改

请注意，jQuery总是更好：

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function(){ $(document).on('click', 'img.littleshow', function(){ $('#bigshowcase').html('<img src="' + $(this).attr('src') + '" />'); }); }); </script>

将完成这项工作。

Answer 2

您可以将您点击的元素作为函数的变量：

<img id="mainPic">
<img id="thumbImage" src="<url>" onclick="SetPic(this)">



var mainPic = document.getElementById("mainPic");

function SetPic(thumbPic)
{
   mainPic.src = thumbPic.src;
}

一个函数的多个onclicks

2 个答案: