我很喜欢使用jquery去解决前端的问题。今天在使用data()函数时候发现有点坑,试了好久没出来,现在总结下。
通常我们会使用ajax请求后端,并且返回json对象,然后拿这个对象遍历出值并放到元素中显示出来。当我们需要在这个在这个元素设置一个标识时。我们可以自定一个属性,并用attr() 方法去获取值。如
<span class="s" userid="1" >张三</span>
这样,我们就可以使用$(".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('<div style="margin: 50% 0;text-align: center;">没有可观看的视频<br>快去个人中心上传吧</div>');
return;
}
$.each(result,function(i,v){
var videoEle = [
'<div class="video-div" style="display: flex;justify-content: center;flex-wrap: wrap;margin:20px 0px;">'+
'<div style="width: 90%;"> '+
' <div style="width: 100%;"> '+
' <img src="'+v.coverFile+'" style="width: 100%;"/> '+
' </div> '+
' <div style="width: 100%;text-align: center;padding-top: 5px;"> '+
' '+v.title+' ' +
' </div> '+
'</div> '+
'</div> '].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")) //这样就可以取到值了
});