文章目录

jquery选择多图并保存选中的数据

使用jquery选择多张图片并保存对应的数据,这是最近在一个项目中遇到的。

相关的css样式就不说了,照着实例中的来就可以。

我们用li标签包裹img元素,并在li上面加一个data-id保存图片对应的数据,可以是id,也可以是图片地址等,根据自己需要来。

当点击图片的时候,会给li标签加上一个红色边框凸出显示,其实就是加了over这个样式。

选中的图片再次点击,会取消选中,也就是移除over样式。

有一个名为selectpic的文本框,用来保存选中后的数据。

点击的图片的时候会判断li标签是否包含over样式,如果不包含则给其加上选中状态,并将data-id加入到文本框里面。

如果点击的时候li标签已经包含over样式了,则表示是取消选中状态,将移除over样式,并将data-id从文本框里面移除。

这里添加、移除数据我使用了数组操作,其中涉及到splicepush两个与数组有关的方法,有兴趣的可以了解一下

html代码<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
<script src="http://apps.bdimg.com/libs/jquery/1.8.3/jquery.min.js"></script>
<style type="text/css">
*{font-size: 12px;font-family: Arial, Helvetica, sans-serif;}
ul{width:100%;margin: 0px;padding: 0px; list-style: none;}
li{float: left; margin:5px;border:2px solid #ffffff; cursor:pointer;}
li.over{border:2px solid #ff0000;}
li img{width:250px; height:134px;display:block;}
</style>
</head>
<body>
<div>
<ul>
	<li class="selectpic" data-id="1"><img src="http://www.santii.com/source/1505785832423874.jpg" /></li>
	<li class="selectpic" data-id="2"><img src="http://www.santii.com/source/1505451934255210.jpg" /></li>
	<li class="selectpic" data-id="3"><img src="http://www.santii.com/source/1505451934407071.jpg" /></li>
	<li class="selectpic" data-id="11"><img src="http://www.santii.com/source/1504426686722383.jpg" /></li>
	<li class="selectpic" data-id="12"><img src="http://www.santii.com/source/20170901073821751.jpg" /></li>
	<li class="selectpic" data-id="13"><img src="http://www.santii.com/source/20170901073821752.jpg" /></li>
	<li class="selectpic" data-id="112"><img src="http://www.santii.com/source/20170901073821753.jpg" /></li>
	<li class="selectpic" data-id="113"><img src="http://www.santii.com/source/1505451934559873.jpg" /></li>
	<li class="selectpic" data-id="114"><img src="http://www.santii.com/source/1505451934529051.jpg" /></li>
	<li class="selectpic" data-id="115"><img src="http://www.santii.com/source/1505451934477420.jpg" /></li>
</ul>
</div>
<p>
<input type="text" id="selectpic" name="selectpic" style="width:100%;" />
</p>
<script>
$(document).on("click",".selectpic",function(){
	var id=$(this).attr("data-id");
	var classname=$(this).attr("class");
    var selectpicArr=new Array();
	var selectpicStr=$("#selectpic").val();
	if(selectpicStr!='' ) selectpicArr=selectpicStr.split(",");
	if (classname.indexOf('over')>-1){
		$(this).removeClass("over");
		selectpicArr.splice(selectpicArr.indexOf(id),1);//此处indexOf获取元素所在的位置
	}else{
		$(this).addClass("over");
		selectpicArr.push(id);
	}
	$("#selectpic").val(selectpicArr.join(","));
});
</script>
</body>
</html>
查看实例

本文网址:http://www.santii.com/article/233.html

数据更新时间:2019-10-19