jquery执行一遍函数以后,便无法再次执行,应该是$(this)改变了,求具体解答
jquery执行一遍函数之后,便无法再次执行,应该是$(this)改变了,求具体解答。
------解决思路----------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>地区选择版</title>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
$.fn.extend({
BoxAClick:function(){
var oH=20;
$(this).click(function(e){
if($(this).index()==($(this).parent().children().length-1)){
//alert('1');
if($(this).hasClass('cur')){
//alert('11');
$(this).parent().next().hide();
$(this).removeClass('cur').siblings().first().addClass('cur');
}else{
//alert('12');
$(this).addClass('cur').siblings().removeClass('cur');
$(this).parent().next().css({"top":(e.pageY + oH) + "px","left":(e.pageX - oH) + "px"}).show();
}
}else{
//alert('2');
$(this).parent().next().hide();
if($(this).hasClass('cur')){
//alert('21');
//alert($(this).parent().children('a.cur').length);
if($(this).parent().children('a.cur').length==1){
//alert('212');
if($(this).index()==0){
//alert('2121');
$(this).addClass('cur')
}else{
//alert('2122');
$(this).removeClass('cur').siblings().first().addClass('cur');
}
}else{
//alert('213');
$(this).removeClass('cur');
}
}else{
//alert('22');
//$(this);
if($(this).siblings().first().hasClass('cur')){
//alert('221');
$(this).addClass('cur').siblings().removeClass('cur');
}else{
//alert('222');
$(this).addClass('cur');
if($(this).index()==0){
//alert('2221');
$(this).siblings().removeClass('cur');
}else if($(this).index()==$(this).parent().children().length-1){
//alert('2222');
$(this).siblings().first().removeClass('cur');
}else{
//alert('2223');
$(this).siblings().last().removeClass('cur');
}
}
}
}
});
},
FollowAClick:function(){
$(this).click(function(){
if($(this).hasClass('cur')){
$(this).removeClass('cur');
}else{
$(this).addClass('cur');
}
});
},
FollowSubmitAClick:function(){
var _this=$(this);
_this.click(function(){
//alert($(this).index());
if(_this.index()==0){
//alert('1');
var oLen=_this.parent().prev().children().children('a.cur');
var result='';
for(var i=0;i<oLen.length;i++){
result+='<a class="cur">'+oLen.eq(i).text()+'</a>';
}
//alert(result);
_this.parent().parent().prev().html('<a>不限</a>'+result+'<a class="more">更多</a>');
_this.parent().parent().hide();
}else{
alert('2');
}
})
}
});
$(function(){
$(".box a").BoxAClick();
$(".follow a").FollowAClick();
$(".follow .submit a").FollowSubmitAClick();
//点更多,然后选择几个数据,然后点击确定,然后再点击就无效了。关于$(this)//
});
</script>
<style>
*{margin:0;padding:0;font-size:12px;}
img{border:none;}
ul,li{list-style:none;}
.box{width:500px;margin:100px 0 0 200px;border:#cacaca solid 1px; padding:15px 20px 20px;overflow:hidden;}
.box a,.follow li a,.follow .submit a{float:left;display:inline-block;height:24px;line-height:24px;padding:0 10px;margin-top:5px; margin-right:10px;border-radius:4px;border:#fff solid 1px;text-decoration:none;cursor:pointer;}
.box a:hover,.follow li a:hover{border-color:#cacaca;}
.box a.cur,.follow li a.cur{border-color:red;color:white;background:red;}
.follow{position:absolute;border:1px solid #000;overflow:hidden;display:none;padding:10px;background:#fff;}
.follow li{overflow:hidden;border-bottom:#e4e4e4 solid 1px;padding:5px 10px 10px;}
.follow .submit{border:none;}
.follow .submit a{width:40px;text-align:center;}
.follow .submit a.sure{background:#06a3fc;color:#fff}
.follow .submit a.cannel{background:#c5c5c5;color:#000}
</style>
</head>
<body>
<div class="box">
<a class="cur">不限</a><a>上海</a><a>杭州</a><a>北京</a><a>深圳</a><a>成都</a><a class="more">更多</a>
</div>
<div class="follow">
<ul>
<li><a>上海</a><a>杭州</a><a>北京</a><a>深圳</a><a>成都</a></li>
<li><a>重庆</a><a>苏州</a><a>镇江</a><a>武汉</a><a>荆州</a><a>罗湖</a><a>福田</a><a>南山</a><a>宝安</a></li>
<li><a>光明</a><a>东莞</a><a>香港</a><a>澳门</a><a>台湾</a></li>
</ul>
<div class='submit'><a class='sure'>确定</a><a class='cannel'>取消</a></div>
</div>
</body></html>
------解决思路----------------------
$.fn.extend({