$.fn.extend中的函数在jsp页面中调用却无法执行，求助！！
淳于新
alert(“js”)可以弹出来，但是下面的代码无法执行，
js 代码片
;(function($) {
alert("js");
$.fn.extend({
gallery: function() {
$(this).on("click", function() {
var self = $(this),
link = self.parent().find("a"),
bd = $("body");
html = "\
<div class='gallery-overlay'>\
<div class='gallery-photo'><span></span><img src='"+ self.attr("href") +"'></div>\
<div class='gallery-thumb'></div>\
<a class='gallery-prev' href='javascript:;' title='上一个'><</a>\
<a class='gallery-next' href='javascript:;' title='下一个'>></a>\
<a class='gallery-close' href='javascript:;' title='关闭'>×</a>\
</div>\
";
bd.css("overflow-y", "hidden").append(html);
var overlay = $(".gallery-overlay"),
photo = $(".gallery-photo"),
photoImg = photo.find("img"),
thumb = $(".gallery-thumb"),
prev = $(".gallery-prev"),
next = $(".gallery-next"),
close = $(".gallery-close"),
str = "";
//浏览器缩放时候，重置
function toResize() {
var height = $(window).height();
overlay.height(height);
photo.css({"height": height - 200});
photoImg.css({"max-height": height - 200});//解决safari下bug
}
toResize();
$(window).resize(function() {
toResize();
});
//生成缩略图列表
link.each(function() {
var href = $(this).attr("href"),
src = $(this).find("img").attr("src"),
act = "<a href='"+ href +"'><img src='"+ src +"'/></a>";
str += act;
});
thumb.append(str);
//图片切换
var thumbLink = thumb.find("a"),
len = thumbLink.length - 1,
index = link.index(this);
function switchPhoto(index) {
var _this = thumbLink.eq(index);
_this.addClass("selected").siblings().removeClass("selected");
photo.find("img").attr("src", _this.attr("href"));
}
switchPhoto(index);
thumb.on("click", "a", function() {
index = thumbLink.index(this);
switchPhoto(index);
return false;
});
//切换下一个
function switchPrev() {
index--;
if (index < 0) {
index = len;
}
switchPhoto(index);
}
//切换上一个
function switchNext() {
index++;
if (index > len) {
index = 0;
}
switchPhoto(index);
}
prev.on("click", function() {
switchPrev();
});
next.on("click", function() {
switchNext();
});
photo.on("click", "img", function() {
switchNext();
});
//关闭层
function closeOverlay() {
overlay.remove();
bd.css("overflow-y", "auto");
}
close.on("click", function() {
closeOverlay();
});
return false;
});
}
});
})(jQuery);
jsp代码片
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="icon" href="page/img/favicon.ico" type="image/x-icon">
<title></title>
<link href="favicon.png" rel=icon>
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous">
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"></script>
<link
href='https://fonts.googleapis.com/css?family=Roboto:100,300,400,700,500'
rel='stylesheet' type='text/css'>
<!-- <link href="page/css/bootstrap.min.css" rel="stylesheet"> -->
<link href="page/css/style.css" rel="stylesheet">
<link href="page/css/user.css" rel="stylesheet">
<script src="page/js/jquery-1.11.0.min.js" type="text/javascript" ></script>
<script src="page/js/Convert_Pinyin.js" type="text/javascript" charset="utf-8"></script>
<script src="page/js/sjzh.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(document).ready(function(){
alert("ready");
$(".msgcard").hover(function(){
$(this).children(".hide_card").show();
},function(){
$(this).children(".hide_card").hide();
});
var strUrl=window.location.href;
var arrUrl=strUrl.split("/");
var strPage=arrUrl[arrUrl.length-1];
var url="BoxusersController/loginSignOut?uri="+strPage;
$('#tcdl').attr('href',url);
var url1="UserLogin.jsp?uri="+strPage;
$('#dlzc').attr('href',url1);
/* $("#tcdl").click(function(){
$.post("BoxusersController/loginSignOut",function(res){
window.location.reload();
})
}) */
$.post("navigationbarController/findnavigationbar",function(res){
var str=""
for(var i=0;i<res.length;i++){
var hz=res[i].bar_name;
var py=pinyin.getFullChars(hz);
str+="<li style='float: left; margin: 0 15px; height: 75px;'><p style='color: #F1F1F1; size: 24px;'><a style='color: #333333; line-height: 75px;' href='"+py+".jsp'>"+hz+"</a></p></li>"
}
$(".di").empty();
$(".di").append(str);
},"JSON")
$(".center1").click(function(){
var index=$(this).attr("index")
var uid=$("#uid").val();
var data={uid:uid}
var data4={user_id:uid}
var myDate = new Date;
var year = myDate.getFullYear(); //获取当前年
var mon = myDate.getMonth() + 1; //获取当前月
var date = myDate.getDate();
var datetime=year + "-" + mon + "-" + date;
if($("div[index="+index+"]").attr("index")==0){
$.post("BoxusersController/findOne",data,function(res){
var str="";
str+="<h3 class='h3-1'>个人资料</h3>"
str+="<div class='dv1'>"
str+="<img src='http://tongxun.ysxapp.com:8899"+res.icon+"' style='border-radius:50%;height: 80px;width: 80px;'/>"
str+="<div class='dv2' >"+res.username+"</div></div><div class='dv3'><div class='dv4'>"
str+="ID:<span class='span-a' style='color: #A699A6;'>"+res.uid+"</span><br>"
str+="邮箱:<span class='span-a'> "+res.email+"</span></div><ul class='user3'>"
str+="<li >昵称:<span> "+res.username+"</span></li>"
str+="<li >性别: "
if(res.sex==1){
str+="<span> 男</span>"
}else if(res.sex==2){
str+="<span> 女</span>"
}else if(res.sex==0){
str+="<span> 保密</span>"
}
str+="</li>"
if(res.family==null){
str+="<li >地区:<span> </span></li>"
}else{
str+="<li >地区:<span> "+res.family+"</span></li>"
}
str+="<li >简介:<span> "+res.introduce+"</span></li></ul></div>"
$("div[index="+index+"]").empty();
$("div[index="+index+"]").append(str);
},"JSON")
}else if($("div[index="+index+"]").attr("index")==1){
$.post("Box_cardController/findBox_card",data,function(res){
var str="<h3 class='h3-1'>我的相册</h3>";
var a="<div style='padding: 10px;' class='pic1' ><p style='margin-top: 20px; font-size: 20px;'>今天</p >";
var b="<div style='padding: 10px;' class='pic1' ><p style='margin-top: 20px; font-size: 20px;'>过去</p >";
for(var i=0;i<res.length;i++){
var data = getMyDate(res[i].addtime);
var Datea= data.split("-");
var data1=Datea[0]+"-"+Datea[1]+"-"+Datea[2]
var days = DateDiff(data1,datetime);
if(days==0){
var im=res[i].imgs.split(",");
a+="<div class='picture' style='display: inline-block;'><a class='pic-a' href='#' tid='"+res[i].id+"'>"
a+="<img src='http://tongxun.ysxapp.com:8899"+im[0]+"' class='img-p'></a>"
a+="<p style='text-align: center;color: black;padding-top: 5px;'>"+res[i].title+"</p></div>"
}else{
var im=res[i].imgs.split(",");
b+="<div class='picture' style='display: inline-block;'><a class='pic-a' href='#' tid='"+res[i].id+"'>"
b+="<img src='http://tongxun.ysxapp.com:8899"+im[0]+"' class='img-p'></a>"
b+="<p style='text-align: center;color: black;padding-top: 5px;'>"+res[i].title+"</p></div>"
}
}
a+="</div>"
b+="</div>"
$("div[index="+index+"]").empty();
$("div[index="+index+"]").append(str+a+b);
},"JSON")
}else if($("div[index="+index+"]").attr("index")==2){
$.post("Box_topicController/findBox_topic",data,function(res){
var str="<h3 class='h3-1'>历史记录</h3>"
var a="<div><h3 style='height: 43px;border-bottom: 1px solid #e0e0e0;'>今天</h3>"
var b="<div><h3 style='height: 43px;border-bottom: 1px solid #e0e0e0;'>昨天</h3>"
var c="<div><h3 style='height: 43px;border-bottom: 1px solid #e0e0e0;'>更早</h3>"
for(var i=0;i<res.length;i++){
var data = getMyDate(res[i].time);
var Datea= data.split("-");
var data1=Datea[0]+"-"+Datea[1]+"-"+Datea[2]
var date2=Datea[3]+":"+Datea[4]
var days = DateDiff(data1,datetime);
if(days==0){
a+="<div style='border-bottom: 1px solid #e0e0e0;margin: 9px 0;margin-top:0;'>"
a+="<div style='padding-top: 1%;padding-left: 15px;font-size: 23px;'>"+res[i].content+"</div>"
a+="<div style='margin-top:0%;padding-left: 88%;'>今天"+date2+"</div></div>"
}else if(days==1){
b+="<div style='border-bottom: 1px solid #e0e0e0;margin: 9px 0;margin-top:0;'>"
b+="<div style='padding-top: 1%;padding-left: 15px;font-size: 23px;'>"+res[i].content+"</div>"
b+="<div style='margin-top:0%;padding-left: 88%;'>昨天"+date2+"</div></div>"
}else{
c+="<div style='border-bottom: 1px solid #e0e0e0;margin: 9px 0;margin-top:0;'>"
c+="<div style='padding-top: 1%;padding-left: 15px;font-size: 23px;'>"+res[i].content+"</div>"
c+="<div style='margin-top:0%;padding-left: 88%;'>"+data1+"</div></div>"
}
}
a+="</div>"
b+="</div>"
c+="</div>"
$("div[index="+index+"]").empty();
$("div[index="+index+"]").append(str+a+b+c);
},"JSON")
}else if($("div[index="+index+"]").attr("index")==3){
}else if($("div[index="+index+"]").attr("index")==4){
$.post("BoxfllowController/findBoxfllow",data4,function(res){
var str="<h3 class='h3-1'>我的关注</h3>";
for(var i=0;i<res.length;i++){
str+="<div style='height: 85px;border-bottom: 1px solid #e0e0e0;margin: 9px 0;margin-top:0;'>"
str+="<div style='border-radius: 50%;height: 80px;width: 80px;float: left;'><img src='http://tongxun.ysxapp.com:8899"+res[i].icon+"' style='border-radius:50%;height: 80px;width: 80px;'/></div>"
str+="<div style='height: 50%;width: 85%;padding-top: 1%;padding-left: 106px;'>"+res[i].username+"</div>"
str+="<div style='height: 50%;width: 85%;padding-top: 1%;padding-left: 106px;'>"+res[i].introduce+"</div>"
str+="<div style='margin-top:-10%;margin-right: 15px;float: right;'>已关注</div></div>"
}
$("div[index="+index+"]").empty();
$("div[index="+index+"]").append(str);
},"JSON")
}else if($("div[index="+index+"]").attr("index")==5){
$.post("Box_collectionController/findBox_collection",data,function(res){
var str="<h3 class='h3-1'>我的收藏</h3><div style='padding: 10px; display: inline-block;width: 95%;' >";
for(var i=0;i<res.length;i++){
var data = getMyDate(res[i].addtime);
var Datea= data.split("-");
var data1=Datea[0]+"-"+Datea[1]+"-"+Datea[2]+" "+Datea[3]+":"+Datea[4]
var im=res[i].imgs.split(",");
if(res[i].imgs.length==0){
str+="<div class='collect' ><p style='color: black;line-height: 30px;'>"
str+="<img class='headimg' src='http://tongxun.ysxapp.com:8899"+res[i].icon+"' style='border-radius:50%;height: 25px;width: 25px;vertical-align: middle;'/>"
str+=res[i].username+"<span style='float: right;'>收藏时间:"+data1+"</span>"
str+="</p ><p class='ppt' > "+res[i].content+"</p ></div>"
}else{
str+="<div class='collect' ><p style='color: black;line-height: 30px;'>"
str+="<img class='headimg' src='http://tongxun.ysxapp.com:8899"+res[i].icon+"' style='border-radius:50%;height: 25px;width: 25px;vertical-align: middle;'/>"
str+=res[i].username+"<span style='float: right;'>收藏时间:"+data1+"</span></p >"
str+="<a class='pic-b' href=' '><div style='float: left;height: 150px;'><img src='http://tongxun.ysxapp.com:8899"+im[0]+"' ></div></a>"
str+="<p class='ppt' > "+res[i].content+"</p ></div>"
}
}
str+="</div>"
$("div[index="+index+"]").empty();
$("div[index="+index+"]").append(str);
},"JSON")
}
})
/*点击展开相册*/
$(document).on('click','.img-p',function(){
var tid=$(this).parent().attr("tid");
var data={id:tid}
$.post("Box_cardController/findBox_cardID",data,function(res){
var data = getMyDate(res.addtime);
var Datea= data.split("-");
var data1=Datea[0]+"-"+Datea[1]+"-"+Datea[2]+" "+Datea[3]+":"+Datea[4]
var str="<h3 class='h3-1'>我的相册</h3><div style='padding: 10px;' class='pic2 img'><p style='margin-top: 20px; font-size: 20px;' >"+res.title+"<span style='float: right;padding-right: 6%;'>发布时间:"+data1+"</span></p >";
var a="";
var im=res.imgs.split(",");
for(var i=0;i<im.length;i++){
a+="<a class='pic-a' href='http://tongxun.ysxapp.com:8899"+im[i]+"' style='display: inline-block;'>"
a+="<img src='http://tongxun.ysxapp.com:8899"+im[i]+"'>"
a+="</a>"
}
str=str+a+"</div>"
$("div[index=1]").empty();
$("div[index=1]").append(str);
},"JSON");
});
alert("end");
})
</script>
</head>
<body id="page-top" data-spy="scroll" data-target=".navbar">
<div id="main-wrapper">
<section class="section-statistics" id="jumbotron">
<div id="nav" style="height:75px;width:100%;margin:0 auto;background:#F2F2F2;position: fixed;top:0px;z-index: 99999;float: left;">
<ul class="nav_con" style="text-align:center;height:75px;margin: auto;width: 80%;">
<li style="float: left; margin: 0 20% 0 0; height: 75px;"><img
src="page/img/1.png" style="width: 75px;margin-top: 10px;" /></li>
<div class="di"></div>
<c:choose>
<c:when test="${sessionScope.uid==null }">
<li style="float: right; margin: 0 10px; height: 75px;"><p
style="color: #F1F1F1; size: 18px;">
<a id="dlzc" style="color: #333333; line-height: 75px;" href="">登录/注册</a>
</li>
</c:when>
<c:otherwise>
<li style="float: right; margin: 0 10px; height: 75px;width: 100px;">
<div class="msgcard">
<div style="height:75px;">
<a href="gerenzhongxin.jsp" style="color:blue;"><img style="width:49px;height:49px;border-radius:50%;margin-top:12px" src="http://tongxun.ysxapp.com:8899${sessionScope.find.icon}"/></a>
</div>
<div class="hide_card" style="display: none;float:left;z-index:99999;position: absolute;top:75px;background-color:#fff;box-shadow:0 4px 8px 0rgba(0,0,0,.1);padding: 8px 0;width:100px;">
<div class="userControl">
<div class="bord">
<div>
<i class="pull_icon pull_icon1"></i>
<a target="_blank" style="font-size: 16px;">hi，${sessionScope.find.username }</a>
</div>
<div>
<i class="pull_icon pull_icon2"></i>
<a href="gerenzhongxin.jsp" style="color: inherit;font-size: 16px;">个人中心</a>
</div>
<div>
<i class="pull_icon pull_icon3"></i>
<a id="tcdl" style="color: inherit;font-size: 16px;"">退出登录</a>
</div>
</div>
</div>
</div>
</div>
<input id="uid" style="visibility:hidden" value="${sessionScope.uid}"/>
</li>
</c:otherwise>
</c:choose>
</ul>
</div>
</section>
<section class="section-process-wrapper">
<div class="gg" style="">
<div class="title" style="border: 0;margin: 11px 17.5% 0px 17.5%;text-align: center;font-size: 30px;height: 40px;">个人中心</div>
<div class="user" style="position: relative;padding-left: 20%;">
<div class="user1" id="user1" style="float: left;">
<ul class="user2" style="line-height: 35px;">
<li class="user4" ><a class="center1 curr_btn" index='0' id="center1"> 个人资料</a></li>
<li class="user4" ><a class="center1" index='1'> 我的相册</a></li>
<li class="user4" ><a class="center1" index='2'> 历史记录</a></li>
<li class="user4" ><a class="center1" index='3'> 我的小店</a></li>
<li class="user4" ><a class="center1" index='4'> 我的关注</a></li>
<li class="user4" ><a class="center1" index='5'> 我的收藏</a></li>
</ul>
</div>
<div class="nr curr_div" index="0" style="margin: 9px 182px;margin-top: 0;">
<h3 class="h3-1">个人资料</h3>
<div class="dv1">
<img src="http://tongxun.ysxapp.com:8899${sessionScope.find.icon}" style="border-radius:50%;height: 80px;width: 80px;"/>
<div class="dv2" >
${sessionScope.find.username }
</div>
</div>
<div class="dv3">
<div class="dv4">
ID:<span class="span-a" style="color: #A699A6;">666</span><br>
邮箱:<span class="span-a">${sessionScope.find.email }</span>
</div>
<ul class="user3">
<li >昵称:<span> ${sessionScope.find.username }</span></li>
<li >性别: <c:choose>
<c:when test="${sessionScope.find.sex==1 }"><span> 男</span></c:when>
<c:when test="${sessionScope.find.sex==2 }"><span> 女</span></c:when>
<c:when test="${sessionScope.find.sex==0 }"><span> 保密</span></c:when>
</c:choose></li>
<li >地区:<span> ${sessionScope.find.family }</span></li>
<li >简介:<span> ${sessionScope.find.introduce }</span></li>
</ul>
</div>
</div>
<div class="nr" index="1">
</div>
<div class="nr" index="2" style="margin: 9px 182px;margin-top: 0;">
</div>
<div class="nr" index="3">
<h3 class="h3-1">我的小店</h3>
</div>
<div class="nr" index="4">
</div>
<div class="nr" index="5">
</div>
</div>
</div>
</section>
<section class="section-statistics">
</section>
<footer class="footer">
<div class="copyright-section">
<div class="container">
<div class="col-md-12">
<div class="footer_con">
<div class="db">
<dl style="text-align: center;">
<dd class="p2">汽车信息 美食信息 服饰搭配 数码信息 电子产品 家电信息 卖房信息 租房信息 食材信息 护肤信息 旅游信息 养生信息 运动信息 儿童玩具 招聘信息 租借信息</dd>
</dl>
<div class="db1">
<div class="gy">
<div style="text-align: center;">
<a>关于我们 |</a> <a>加入我们 |</a> <a>联系我们 |</a> <a>加盟合作 |</a> <a>产品展示
|</a> <a>行业资讯 |</a> <a>网站地图</a>
</div>
</div>
<div class="co" style="text-align: center;">
<p>
营业执照：<a target="_Blank" href="page/img/yyzz.jpg">91410100MA459AQF3F</a>
增值电信业务经营许可证：<a target="_Blank" href="page/img/zzdx.jpg">豫B2-20190351</a>
</p>
<p>
Copyright 2018-2019 youshuaikeji.com All Rights Reserved <a
target="_Blank"
href="http://www.beianbeian.com/beianxinxi/b1d82769ec1a0e5d7eeee65e98700f5a.html">豫ICP备18031022号</a>
</p>
</div>
<div class="pq" style="text-align: center;">
<p>
版权所有：<a target="_Blank" href="ShouYe.jsp">郑州又帅信息技术有限公司</a>
</p>
</div>
</div>
<div class="foots" style="text-align: center;">
<div class="foot">
<a target="_Blank"
href="http://report.12377.cn:13225/toreportinputNormal_anis.do?utm_source=market&spm=u-2cyt1jahk97pnc4f21.QQLLQDH_mingzhanceshi"><img
src="page/img/wsyhxxjb.png" /></a> <a
href="http://www.12377.cn/node_548446.htm?utm_source=market&spm=u-2cyt1jahk97pnc4f21.QQLLQDH_mingzhanceshi"
target="_Blank"><img src="page/img/wljb.png" /></a> <a
target="_Blank" href="page/img/qyxy.png"><img
src="page/img/qyxyxx.png" /></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</footer>
</div>
<script src="page/js/bootstrap.min.js"></script>
<script src="page/js/scripts.js"></script>
</body>
<script type=text/javascript>
function getClass(className) { //className指class的值
var tagname = document.getElementsByTagName('*'); //获取指定元素
var tagnameAll = []; //这个数组用于存储所有符合条件的元素
for (var i = 0; i < tagname.length; i++) { //遍历获得的元素
if (tagname[i].className.indexOf(className)>=0){ //如果获得的元素中的class的值等于指定的类名，就赋值给tagnameAll
tagnameAll[tagnameAll.length] = tagname[i];
}
}
return tagnameAll;
}
window.onload=function(){
/*头像修改上传*/
function addImage(){
document.getElementById_x("image").click();
}
/*左侧导航栏初始颜色*/
document.getElementById("center1").style.backgroundColor="#00C1DE";
document.getElementById("center1").style.color="white";
/*左侧导航栏*/
document.getElementById("user1").onclick = function(e){
e = e || window.event;
var target = e.srcElement || e.target,
tagName = target.tagName.toLowerCase(),
allLi = document.getElementById("user1").getElementsByTagName("a");
for(var i=0,len=allLi.length;i<len;i++){
if(target == allLi[i]){
document.getElementById("center1").removeAttribute('style');
allLi[i].className = "liSelected";
}else{
allLi[i].className = "liNoSelected";
}
}
};
/*点击a标签切换div内容*/
var btn=getClass('center1');//获取按钮数组
var div=getClass('nr');//获取div数组
for(i=0;i<btn.length;i++){
btn[i].onclick=function(){//按钮点击事件
var index=(this.getAttribute('index')-0);//获取是第几个按钮按下
/* if(btn[index].className.indexOf('curr_btn')>=0) return; *///如果按下的按钮为当前选中的按钮则无反应
for(i=0;i<btn.length;i++){
if(index==i){
btn[i].className='center1 curr_btn';
div[i].className='nr curr_div';
}else{
btn[i].className='center1';
div[i].className='nr';
}
}
}
}
}
/*黑色画廊*/
$('.img a').gallery();
</script>
<script src="page/js/user.js" type="text/javascript" ></script>
</html>
类似资料：