使用jQuery.data() 注意事项

我很喜欢使用jquery去解决前端的问题。今天在使用data()函数时候发现有点坑,试了好久没出来,现在总结下。
通常我们会使用ajax请求后端,并且返回json对象,然后拿这个对象遍历出值并放到元素中显示出来。当我们需要在这个在这个元素设置一个标识时。我们可以自定一个属性,并用attr() 方法去获取值。如

张三
这样,我们就可以使用$(".s").attr("userid") 获取到值

但是,这样感觉有点麻烦,于是用了data() 方法来实现

//my.post 是自己简单封装的$.ajax() 方法 无需理会,直接看关键代码部分
my.post({
	url:"video/queryVideoList"
	,data:data
	,done:function(result){
		$(".videoList").html("");
		if(result.length == 0){
			$(".videoList").html('
没有可观看的视频
快去个人中心上传吧
'); return; } $.each(result,function(i,v){ var videoEle = [ '
'+ '
'+ '
'+ ' '+ '
'+ '
'+ ' '+v.title+' ' + '
'+ '
'+ '
'].join(''); //以下关键代码 var $el = $(videoEle); $el.data("video",v); $(".videoList").append($el); //把它加到页面上显示,注意,直接使用$el变量就行了。我一开始自作聪明用了$el.prop("outerHTML"),结果弄了半天。 console.log($el.data("video")); //可以打印出v对象信息 }); } }); //绑定点击事件 $(document).on("click",".video-div",function(){ console.log($(this).data("video")) //这样就可以取到值了 });

你可能感兴趣的:(JavaScript,Ajax,jQuery)