jQuery基础-选择图片并赋值

最新推荐文章于 2021-06-23 15:16:05 发布

原创最新推荐文章于 2021-06-23 15:16:05 发布 · 2.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#div #jquery #图片 #Button

jQuery 专栏收录该内容

4 篇文章

订阅专栏

这篇博客介绍了如何使用jQuery实现点击按钮选择图片并为其赋值的功能。通过示例代码展示了具体的操作步骤和目标效果，适用于网页开发中处理图片交互的场景。

文件目录：

例一：点击按钮图片全部复制

目标效果：

页面代码：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="js/jquery-1.8.0.min.js"></script>
	<meta charset="utf-8" />
    <script>
        $(function () {                                         //等同于$(document).ready(function(){});
            $("button").click(function () {                     //按钮的点击方法
                $("#copyBefore").clone().appendTo("#copyAfter");//将id为copyBefore的层的内容的复制到id为copyAfter的层中去
            });
        });
    </script>
</head>
<body>
    <div id="copyBefore">
        <img src="image/one.png" />
        <img src="image/three.jpg" />
        <img src="image/two.jpg" />
    </div>
    <button>Click</button>
    <div id="copyAfter"></div>
</body>
</html>

例二：点击按钮选择，选中的图片边框变色

目标效果：

页面代码：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="js/jquery-1.8.0.min.js"></script>
	<meta charset="utf-8" />

    <script>
        var index = 0;
        var temp = 0;
        $(function () { 
            $("button").click(function () {
                $("img:eq(" + temp + ")").removeClass("Selected");    //该对象删除使用的css类，这里名称前不需要加“.”，另外eq下标是从0开始
                $("img:eq(" + index + ")").addClass("Selected");      //该对象添加css类
                temp = index;                                         //将原先的使用css类的下标赋给temp
                index = index + 1;
                if (index == $("img").length) {                       //判断下标是否等于img对象个数，因为个数从1开始，而eq从0开始，所以当下标index等于img对象个数时，就已经越界，需要修改下标
                    index = 0;                                        //将下标重新定义为最开始的0，因为最后一个img对象应用了css类还没有消除，所以temp的值不用变
                }
            });
        });
    </script>

    <style>
        img
        {
            width:160px;
            height:160px;
            border:6px solid red;
        }       
        .Selected{
            border-color:yellow;
        }
    </style>
</head>
<body>
    <div id="picture">
        <img src="image/one.png" />
        <img src="image/three.jpg" />
        <img src="image/two.jpg" />
    </div>
    <button>next</button>   
</body>
</html>

例三：点击next按钮进行选择，点击copy按钮进行复制

目标效果：

页面代码：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="js/jquery-1.8.0.min.js"></script>
    <meta charset="utf-8" />

    <script>
        var index = 0;
        var temp = 0;
        
        $(function () {
            $("#next").click(function () {
                $("img:eq(" + temp + ")").removeClass("Selected");    //该对象删除使用的css类，这里名称前不需要加“.”，另外eq下标是从0开始
                $("img:eq(" + index + ")").addClass("Selected");      //该对象添加css类
                temp = index;                                         //将原先的使用css类的下标赋给temp
                index = index + 1;
                if (index == 3) {                       //判断下标是否等于img对象个数，因为个数从1开始，而eq从0开始，所以当下标index等于img对象个数时，就已经越界，需要修改下标
                    index = 0;                                        //将下标重新定义为最开始的0，因为最后一个img对象应用了css类还没有消除，所以temp的值不用变
                }
            });
            $("#copy").click(function () {
                $("img:eq(" + temp + ")").clone().appendTo("#copyAfter").removeClass("Selected");
            });
        });
    </script>

    <style>
        img {
            width: 160px;
            height: 160px;
            border: 6px solid red;
        }

        .Selected {
            border-color: yellow;
        }
    </style>
</head>
<body>
    <div id="copyBefore">
        <img src="image/one.png" />
        <img src="image/three.jpg" />
        <img src="image/two.jpg" />
    </div>
    <button id="next">next</button>
    <button id="copy">copy</button>
    <div id="copyAfter"></div>
</body>
</html>