Question

我想以另一种形式显示一个表单的图像。我有两个表单index.html和images.html。在index.html中，

<html>
<head>
    <title> demo </title>   
    <style type="text/css">
        #container{
            height:100%;
            width:100%;
            postion:relative;
        }
        .divclass{
            height:auto;
            width:auto;
            position:relative;
        }
        .divclass #imgdiv1{
            margin-top:30px;
            position:relative;
            height:200px;
            width:200px;
            border:1px solid #000;
        }
    </style>    
    <script type="text/javascript" src="jquery-1.8.3.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){                                   
            $('#imgdiv1 img').click(function(){         
                var n=$('#imgdiv1 img').length; 
                $('#lightboxdiv').append(' ('+n+')');
            });
        });
    </script>
</head>
<body>
    <div id="#container">
        <div id="lightboxdiv">
            Light Box Images
        </div>
        <div class="divclass">          
            <div id="imgdiv1">
                <img src="001_19_3.jpg" style="width:150px;height:180px;position:absolute;visible:visible;z-index:1;">
                <img src="002_21_3.jpg" style="width:150px;height:180px;position:absolute;visible:hidden;">
                <img src="003_19_3.jpg" style="width:150px;height:180px;position:absolute;visible:hidden;">
                <img src="004_19_3.jpg" style="width:150px;height:180px;position:absolute;visible:hidden;">
            </div>
        </div>
    </div>
</body>
</html>

如果单击图像，图像计数将为5.如果单击计数，则在下一个窗口中显示图像。我想得到5张图片并在images.html中显示图片。谁有人可以帮忙？请！

Answer 1

好的......你可以使用querystring来做到这一点...... 你的index.html页面看起来像这样..

<html>
<head>
<title></title>
<style type="text/css">

    .cont1
    {
        width:150px;
        height:80px;
        background-color:#bebebe;
    }

    img
    {
        display:none;
    }

    .ch:hover
    {
        cursor:pointer;
        text-decoration:underline;
    }

</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        var count;
        var imgbox = [];

        $('.cont1').click(function () {

            var elem = $(this);

            if ($('.ch').html() == '') {

                count = elem.children('img').length;
                $('.ch').html(count);

                for (i = 0; i < elem.children('img').length; i++) {
                    imgbox.push(elem.children('img').eq(i).attr('src'));
                }
            }
            else {

                count = count + elem.children('img').length;
                $('.ch').html(count);

                for (i = 0; i < elem.children('img').length; i++) {
                    imgbox.push(elem.children('img').eq(i).attr('src'));
                }
            }

            elem.css('border', '2px solid #000');
            elem.unbind('click');
        });

        $('.ch').click(function () {
            window.location = "images.html?allimg=" + imgbox;
        });
     });
    </script>
    </head>
    <body>
    <div class="cont1">Div1
        <img alt="" src="Images/1.jpg" width="100px" height="70px" />
        <img alt="" src="Images/2.jpg" width="100px" height="70px" />
        <img alt="" src="Images/3.jpg" width="100px" height="70px" />
    </div>
    <br />
    <div class="cont1">Div2
        <img alt="" src="Images/1.jpg" width="100px" height="70px" />
        <img alt="" src="Images/2.jpg" width="100px" height="70px" />
        <img alt="" src="Images/3.jpg" width="100px" height="70px" />
        <img alt="" src="Images/3.jpg" width="100px" height="70px" />
    </div>
    <br />
    <div class="cont1">Div3
        <img alt="" src="Images/1.jpg" width="100px" height="70px" />
        <img alt="" src="Images/2.jpg" width="100px" height="70px" />
    </div>
    <br />
    Image Count : &nbsp;&nbsp;<span class="ch"></span>
    </body>
    </html>

并且您的images.html看起来像这样..

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        var url = window.location.toString();
        var img = url.split('?')[1].split('=')[1];
        var imgcount = img.split(',').length;
        for (i = 0; i < imgcount; i++) {
            $('body').append('<img alt="" src="' + img.split(',')[i] + '" width="200px" height="140px" />&nbsp');
        }
     });
</script>
</head>
<body>

</body>
</html>

说明：我们正在使用带有图像的3个div。通过使用css属性display：none，最初的图像是不可见的。单击div后，它会检查计数范围是否为空。如果它是空的，它填充它与否。点击的div中出现的图像。同时我们正在使用数组。数组将填充点击的div中存在的所有图像的“src”并更改计数。

或者如果计数跨度不为空，那么它将添加否。当前单击的div中存在的图像，并在图像中附加图像的“src”并增加计数编号。

并点击计数点击它会触发点击事件，我们正在使用window.location =“index2.htm？allimg =”+ imgbox。这里我们使用查询字符串将数组传输到下一页。

现在在images.html页面上在文档就绪时，我们使用$ .split（）来分割网址并在页面上显示图像。

如果您发现任何困难。让我知道.. 你可以发邮件给我@ amit.kishoreda@gmail.com

如何使用jquery中的缓存以另一种形式显示一个表单的图像？

1 个答案: