jquery里为一组HTML元素设置click事件,当元素符合某个条件我解绑了,但当这个条不符合时则需要继续绑定
我要实现点击选择某个标签,就会追加到已选标签,当选择5个标签以后,我就把被选择标签解绑,而只要已选标签关闭一个,被选标标签便可选择的问题部分代码jquery$(".mar...
我要实现点击选择某个标签,就会追加到已选标签,当选择5个标签以后,我就把被选择标签解绑,而只要已选标签关闭一个,被选标标签便可选择的问题
部分代码
jquery
$(".mark_list_cont .mark_list_r").click(function(){ $(this).addClass("mark_list_r_slect"); var text=$(this).text(); //alert(text); //使用HTML方法创建元素 var mark_item_li="<li class='mark_color mark_add mark_li'><span class='mark_close'><img src='../../img2/images/mark_close.png'></span></li>"; $(".mark_item").append(mark_item_li); $(".mark_item").find("li:last").prepend(text); $(".mark_close").click(function(){ var close_txt = $(this).parent(this).text(); //alert(close_txt); //if(close_txt == text){$(".mark_list_r").removeClass("mark_list_r_slect"); } $(".mark_list_cont .mark_list_r").each(function(index, element){ //对所有标签进行遍历 var text1 = $(this).text();//获取每个标签里的文本 if(text1 == close_txt){ //对已选标签和所有标签中的文本进行比较 $(this).removeClass("mark_list_r_slect"); return false; } }); $(this).parent().hide(); }); var li_number=$(".mark_item li").size(); // alert(li_number); if(li_number >5){$(".mark_list_r").unbind('click'); $(".mark_tc_wrap").css({'display':'block'});} });
HTML
<div class="block_line mark_color pull-left mark_item_tit">已选标签:</div> <ul class="block_line mark_color mark_item pull-left"> <li class="mark_color mark_add"> 油耗<span class="mark_close"><img src="../../img2/images/mark_close.png" alt="close"></span></li> </ul>
<div class="col-md-11 mark_list_cont clear_padding01 p_relative"> <div class="mark_text"> <span class="mark_list_r">熄火1</span> <span class="mark_list_r">油耗2</span> <span class="mark_list_r">摩车3</span> <span class="mark_list_r">启动慢4</span> <span class="mark_list_r">熄火</span> ...... </div> <div class="switch mark_down">展开</div> </div> 展开
部分代码
jquery
$(".mark_list_cont .mark_list_r").click(function(){ $(this).addClass("mark_list_r_slect"); var text=$(this).text(); //alert(text); //使用HTML方法创建元素 var mark_item_li="<li class='mark_color mark_add mark_li'><span class='mark_close'><img src='../../img2/images/mark_close.png'></span></li>"; $(".mark_item").append(mark_item_li); $(".mark_item").find("li:last").prepend(text); $(".mark_close").click(function(){ var close_txt = $(this).parent(this).text(); //alert(close_txt); //if(close_txt == text){$(".mark_list_r").removeClass("mark_list_r_slect"); } $(".mark_list_cont .mark_list_r").each(function(index, element){ //对所有标签进行遍历 var text1 = $(this).text();//获取每个标签里的文本 if(text1 == close_txt){ //对已选标签和所有标签中的文本进行比较 $(this).removeClass("mark_list_r_slect"); return false; } }); $(this).parent().hide(); }); var li_number=$(".mark_item li").size(); // alert(li_number); if(li_number >5){$(".mark_list_r").unbind('click'); $(".mark_tc_wrap").css({'display':'block'});} });
HTML
<div class="block_line mark_color pull-left mark_item_tit">已选标签:</div> <ul class="block_line mark_color mark_item pull-left"> <li class="mark_color mark_add"> 油耗<span class="mark_close"><img src="../../img2/images/mark_close.png" alt="close"></span></li> </ul>
<div class="col-md-11 mark_list_cont clear_padding01 p_relative"> <div class="mark_text"> <span class="mark_list_r">熄火1</span> <span class="mark_list_r">油耗2</span> <span class="mark_list_r">摩车3</span> <span class="mark_list_r">启动慢4</span> <span class="mark_list_r">熄火</span> ...... </div> <div class="switch mark_down">展开</div> </div> 展开
1个回答
展开全部
你是美工吗?这个效衫培拿果做程序的做起来比较好做,你的标签最好都加上唯一标识,ID,当你点击这的时候调用id,然后存在一个input里面,用逗中梁号隔或搭开存成字符串,例如:mark1,mark2,mark3
这样存,然后当超出5个的时候你split拆分成数组,去掉第一个元素吧新的ID再组成新的字符串
这样存,然后当超出5个的时候你split拆分成数组,去掉第一个元素吧新的ID再组成新的字符串
更多追问追答
追问
我偏向于写HTML页面,以我那种写法用jquery绑定以后,然后再解除绑定不可以实现吗
追答
可以实现啊方法我都告诉你了啊。。。。
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询