needs to do a special effect, which is a secondary development on the original project. One effect to be done is
click on the video to show the following function. There is a video list below the related video, but it is not displayed because it is a static page.
related codes
html:
<div class="container-videos" id="container-Tactics">
<div class="classIfication">
<ul>
<li>
<span></span>
</li>
<li>
<span></span>
</li>
</ul>
</div>
<div class="All_video">
<div class="swiper_video">
<div class="Grand_patrol jiepan">
<div class="jiepan_swiper" data-comment="title_video" data-Template="Template1">
<!--<div class="Title Title-video clearfix">
<div class="Title-video-left">
</div>
<div class="Title-video-right">
<a href=""> >></a>
</div>
</div>-->
</div>
</div>
<div class="Read_the_tape jiepan">
<div class="jiepan_swiper" data-comment="title_comment" data-Template="Template2">
<div class="Title Title-comment clearfix">
<div class="Title-video-left">
568
</div>
<div class="Title-video-right">
<a href=""> >></a>
</div>
</div>
<div class="Grand_Template" id="Grand_Template_1">
<div class="Grand_Template-center">
<div class="Grand_Template-title clearfix">
<div class="left">
<nav><img src="../images/images/user_infor.png"></nav>
<h2></h2>
</div>
<div class="right">
<i class="iconfont"></i><span>39</span>
</div>
</div>
<div class="Grand_Template-text">
30%
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="send_comment">
<div class="send_comment_center">
<input type="text" name="content" class="content" placeholder="" /><button class="send"></button>
</div>
</div>
</div>
<div class="box hide">
<i class="iconfont"></i>
</div>
js:
var aJpSwiper=document.querySelectorAll (".jiepan _ swiper");
tabLoad.prototype.bind (aJpSwiper [0], "title_video",function () {
this.innerHTML=`
<div class="Title Title-video clearfix">
<div class="Title-video-left">
</div>
<div class="Title-video-right">
<a href="v_senior.html"> >></a>
</div>
</div>
`
});tabLoad.prototype.bind (aJpSwiper [1], "title_comment",function () {
) this.innerHTML=`
<div class="Title Title-video clearfix">
<div class="Title-video-left">
${num}
</div>
<div class="Title-video-right"></div>
</div>
`
});
loaded js:
function tabLoad (obj,oJson) {
var This=this; //
var oDir=oJson.dir?oJson.dir:"y";
var oPrevent=oJson.prevent!="undefinde"?oJson.prevent:true;
if(!oJson.prevent){
document.addEventListener("touchstart",function(e){e.preventDefault();},false);
document.addEventListener("touchmove",function(e){e.preventDefault();},false);
document.addEventListener("touchend",function(e){e.preventDefault();},false);
}
this.target=oJson.flag?oJson.flag:false;
this.link=oJson.link; //
this.aLink=oJson.data; //
this.oGetMessage=this.getWindow();
this.oParent=document.querySelector(obj);
console.log(this.oParent)
this.oClassFinc=this.oParent.querySelector(".classIfication");
this.aLi=this.oParent.querySelectorAll("li");
this.oIndex=oJson.add?oJson.add:0;//
this.oVideo=this.oParent.querySelector(".All_video");
this.oSwiper=this.oParent.querySelector(".swiper_video");
this.aJieS=this.oParent.querySelectorAll(".jiepan_swiper");
this.oJp=this.oParent.querySelectorAll(".jiepan");
this.oWidth=this.oJp[0].offsetWidth;
this.oSwiper.style.width=this.oWidth*this.oJp.length+"px";
this.oSwiper.style.transform="translateX(-"+this.oIndex*this.oJp.length+"px)";
//
this.oFn=oDir=="y"?"offsetHeight":"offsetWidth";
this.oPage=oDir=="y"?"pageY":"pageX";
this.dir=oDir=="y"?"Y":"X";
this.oTran=oDir=="y"?"translateY":"translateX";
this.setHeight();//
window.onresize=function(){ //
This.oGetMessage=This.getWindow();
This.setHeight();
};
for(var i=0;i<this.aLi.length;iPP){
(function(index){
This.aJieS[i].style.cssText="";
This.aJieS[i].dataset.translateX=0;
This.aJieS[i].dataset.translateY=0;
This.aJieS[i].indexs=0;
This.aJieS[i].index=index;
This.aJieS[i].innerHTML="";
This.aJieS[i].Loding=false;
This.aLi[i].flag=true;
This.aLi[i].className="";
if(!This.aLi[i].addEvent){
This.aLi[i].addEventListener("touchend",This.iOpen.bind(This,index),false);
This.aLi[i].addEvent=true;
}
}(i))
};
this.iOpen(this.oIndex);//
};
tabLoad.prototype={
"constructor":tabLoad, //
"getWindow":function(){
return {
"clientWidth":document.documentElement.clientWidth||document.body.clientWidth,
"clientHeight":document.documentElement.clientHeight||document.body.clientHeight
}
},
"hasClass":function(obj,attr){
var oIndex="";
for(var i=0;i<obj.length;iPP){
if(obj[i].className.indexOf(attr,0)!=-1){
oIndex=i;
break
}
}
return oIndex
},
/**/
"EnChTo":function(text,h){
window.localStorage.setItem("base36",h);
var monyer = new Array();var i,s;
for(i=0;i<text.length;iPP){
monyer+=text.charCodeAt(i).toString(h)+" ";
}
return monyer;
},
/**/
"DeChTo":function(text){
var monyer = new Array();var i;
var s=text.split(" ");
for(i=0;i<s.length;iPP){
monyer+=String.fromCharCode(parseInt(s[i],window.localStorage.getItem("base36")));
}
return monyer;
},
"setHeight":function(){
this.oVideo.style.height=this.oGetMessage.clientHeight-this.oClassFinc.offsetHeight+"px";
this.oSwiper.style.height=this.oGetMessage.clientHeight-this.oClassFinc.offsetHeight+"px";
this.oJp.forEach((item,index)=>{
item.style.height=this.oGetMessage.clientHeight-this.oClassFinc.offsetHeight+"px";
});
},
"iOpen":function(oIndex){
this.aLi[this.oIndex].classList.remove("active");
this.oIndex=oIndex;
this.oSwiper.style.transition="transform 0.6s cubic-bezier(0.64, -0.35, 0.35, 1.47)";
this.oSwiper.style.transform="translateX(-"+this.oIndex*this.oWidth+"px)";
this.aLi[this.oIndex].classList.add("active");
if(this.aLi[this.oIndex].flag){
this.aJieS[this.oIndex].dataset.comment&&this.triggle(this.aJieS[this.oIndex],this.aJieS[this.oIndex].dataset.comment)
this.aLi[this.oIndex].flag=false;
this.getData({
"link":this.aLink[this.oIndex],
"oIndex":this.oIndex
});
if(!this.aJieS[this.oIndex].addEvent){
this.Sliding_screen({
el:this.aJieS[this.oIndex],
});
};
}
},
"getData":function(data){
var This=this;
var oShowE=this.aJieS[data.oIndex];
//
var oData=data.link?data.link:{};
oShowE.indexs+=1;
oData.page=oShowE.indexs;
var url=$.type(this.link).toLowerCase()=="array"?this.link[data.oIndex]:this.link;
$.ajax({
"url":url,
"data":oData,
"dataType":"json",
"type":"get",
"success":res=>{
if(res.data){
var oTemp=oShowE.dataset.template?oShowE.dataset.template:"Template1";
for(var i=0;i<res.data.length;iPP){
oShowE.innerHTML+=this[oTemp](res.data[i],i);
}
var oLoading=oShowE.querySelector(".Loading");
if(oLoading){
oLoading.remove();
oShowE.Loding=false;
}
this.after&&this.after();
}else{
oShowE.Loding=true;
if(oShowE.indexs!=1){
var oLoading=oShowE.querySelector(".Loading");
oLoading.remove();
oShowE.innerHTML+="<p style="font-size: 20px; color:-sharpf00; text-align: center;">..."
setTimeout(function(){
var obj=oShowE.children[oShowE.children.length-1];
obj.remove();
This.oMaxS=(oShowE.parentNode[This.oFn]-oShowE[This.oFn]-20)>0?0:(oShowE.parentNode[This.oFn]-oShowE[This.oFn]-20);//
oShowE.style.transform=This.oTran+"("+This.oMaxS+"px)";
oShowE.dataset[This.oTran]=This.oMaxS;
},5000);
}else{ //
oShowE.style.height="100%"
oShowE.innerHTML+="<div class="null" style="position:relative;height:100%">\
<div style="position:absolute;width:100%">\
<img src="../images/beijin.jpg">\
<p style="font-size: 20px; color:-sharp9C9C9C; position: absolute; top: 100%; transform: translateY(-50%); width: 100%; text-align: center;"><br/>\
</div>\
</div>"
}
};
},
"error":function(res){
}
})
}
"bind":function(obj,events,fn){
obj.oJson=obj.oJson||{};
obj.oJson[events]=obj.oJson[events]||[];
obj.oJson[events].push(fn);
console.log(obj)
},
}
what can I do to bind these two functions using the bind method, load these two function modules when clicking on the video or comment function, or how to improve them