Home >Backend Development >PHP Tutorial >javascript - 一个id 绑定click事件 做不同的条件判断?

javascript - 一个id 绑定click事件 做不同的条件判断?

WBOY
WBOYOriginal
2016-06-06 20:19:251622browse

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>

javascript - 一个id  绑定click事件 做不同的条件判断?

javascript - 一个id  绑定click事件 做不同的条件判断?

javascript - 一个id  绑定click事件 做不同的条件判断?

问题补充: 注册协议这个弹窗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>

javascript - 一个id  绑定click事件 做不同的条件判断?

javascript - 一个id  绑定click事件 做不同的条件判断?

javascript - 一个id  绑定click事件 做不同的条件判断?

问题补充: 注册协议这个弹窗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的动作就不会冲突了。

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn