Home >Backend Development >PHP Tutorial >javascript - 一个id 绑定click事件 做不同的条件判断?
js代码:
<code> //弹窗注册协议 ms=window.parent.document.getElementById('inputzz1'); ks=window.parent.document.getElementById('inputzz'); $('#yes-agree').click(function(){ console.log(ms); if(!(ms.getAttribute('checked'))){ console.log(123); $("#inputzz1").attr("checked",true); $("#check-do1").addClass("check-do-on"); $("button[title='注册']").removeAttr("disabled","disabled").css("background-color","#E4393C");//启用提交按钮 console.log(1234); } if(!(ks.getAttribute('checked'))){ $("#inputzz").attr("checked",true); $("#check-do").addClass("check-do-on"); $(".pt-mid").css({"background-position":"-57px -303px"}, {"width":"175px"},{"height":"33px"}); $("#btnrdz").removeAttr('disabled','disabled');//禁用提交按钮 } $('.sc-model').fadeOut().html(""); $('.sc-zzc-bg').fadeOut(); }); $('#no-agree').click(function(){ if(ms.getAttribute('checked')){ console.log(123); $("#inputzz1").attr("checked",false); $("#check-do1").removeClass("check-do-on"); $("button[title='注册']").attr('disabled','disabled').css("background-color","#ccc");//禁用提交按钮 } if(ks.getAttribute('checked')){ $("#inputzz").attr("checked",false); $("#check-do").removeClass("check-do-on"); $(".pt-mid").css({"background-position":"-610px -583px"}, {"width":"175px"},{"height":"33px"}); $("#btnrdz").attr('disabled','disabled');//禁用提交按钮 } $('.sc-model').fadeOut().html(""); $('.sc-zzc-bg').fadeOut(); }); </code>触发事件html片段:
<code><span class="agree"> <b><我已阅读国广相关手册></b> </span> </code>
注册协议html:
<code><p class="Msoagree"> <span> <a class="no-agree" id="no-agree"><i></i>不同意</a> <a class="yes-agree" id="yes-agree"><i></i>同 意</a> </span> </p> </code>
问题补充: 注册协议这个弹窗html是放在外部的,并且页面两处地方点击弹出的是同一个外部的html.
现在点击同意或者不同意控制的是两个form表单中的样式。需求: 分别点击同意或者不同意这两个id时,能否让js只修改相应的form表单内的样式??
js代码:
<code> //弹窗注册协议 ms=window.parent.document.getElementById('inputzz1'); ks=window.parent.document.getElementById('inputzz'); $('#yes-agree').click(function(){ console.log(ms); if(!(ms.getAttribute('checked'))){ console.log(123); $("#inputzz1").attr("checked",true); $("#check-do1").addClass("check-do-on"); $("button[title='注册']").removeAttr("disabled","disabled").css("background-color","#E4393C");//启用提交按钮 console.log(1234); } if(!(ks.getAttribute('checked'))){ $("#inputzz").attr("checked",true); $("#check-do").addClass("check-do-on"); $(".pt-mid").css({"background-position":"-57px -303px"}, {"width":"175px"},{"height":"33px"}); $("#btnrdz").removeAttr('disabled','disabled');//禁用提交按钮 } $('.sc-model').fadeOut().html(""); $('.sc-zzc-bg').fadeOut(); }); $('#no-agree').click(function(){ if(ms.getAttribute('checked')){ console.log(123); $("#inputzz1").attr("checked",false); $("#check-do1").removeClass("check-do-on"); $("button[title='注册']").attr('disabled','disabled').css("background-color","#ccc");//禁用提交按钮 } if(ks.getAttribute('checked')){ $("#inputzz").attr("checked",false); $("#check-do").removeClass("check-do-on"); $(".pt-mid").css({"background-position":"-610px -583px"}, {"width":"175px"},{"height":"33px"}); $("#btnrdz").attr('disabled','disabled');//禁用提交按钮 } $('.sc-model').fadeOut().html(""); $('.sc-zzc-bg').fadeOut(); }); </code>触发事件html片段:
<code><span class="agree"> <b><我已阅读国广相关手册></b> </span> </code>
注册协议html:
<code><p class="Msoagree"> <span> <a class="no-agree" id="no-agree"><i></i>不同意</a> <a class="yes-agree" id="yes-agree"><i></i>同 意</a> </span> </p> </code>
问题补充: 注册协议这个弹窗html是放在外部的,并且页面两处地方点击弹出的是同一个外部的html.
现在点击同意或者不同意控制的是两个form表单中的样式。需求: 分别点击同意或者不同意这两个id时,能否让js只修改相应的form表单内的样式??
很简单的东西,写这么复杂
<code>$('#yes-agree').on('click', function(){ // 这里判断浮层是否显示,假设$(xxx)是你的浮层 if($(xxx).is(':visible')){ // 浮层显示,修改浮层内样式 $('#inputzz1').prop('checked', true); $("#check-do1").addClass("check-do-on"); $("button[title='注册']").prop('disabled', false); } else { // 浮层隐藏,修改页面内样式 $("#inputzz").prop("checked",true); $("#check-do").addClass("check-do-on"); $("btnrdz").prop('disabled', false); } $('.sc-model').fadeOut().html(""); $('.sc-zzc-bg').fadeOut(); });</code>
谢谢,你的提示,代码是精简了好多,不过我换了种方式去做了,通过改变id的名称去做click事件的绑定,这样两个form的动作就不会冲突了。