Question

当用户滚动到条款及条件的底部时，它会删除a#submit按钮上的课程，点击a#submit后，它会删除a#submitbutton上的课程停用状态。一切都有效，但需要两次点击才能删除第一个类，如果你不向下滚动它，它会添加一个类突出显示，也需要两次点击！为什么需要两次鼠标点击，我认为这是绑定和我糟糕的代码？

<style>
p {
    padding: 0.25em;
}  
#terms {
    border: solid 1px;
    height: 24em;
    overflow: auto;
    margin-bottom: 1em;
}
#termsInner {
    padding: 0.5em 0;
}
.highlighted {
    background-color: #ff0;
}
#submit {
    color: blue;
    text-decoration: underline;
}
</style>
<script type="text/javascript">
// Select the elements of the HTML page.
jQuery(document).ready(function() {
    var instructions = jQuery('#instructions'),
        terms = jQuery('#terms'),
        termsInner = jQuery('#termsInner'),
        submit = jQuery('#submit');     
            submit.bind('click', function() {
                instructions.addClass('highlighted');

                setTimeout(function() {
                    instructions.removeClass('highlighted');
                }, 2000);
            });

            terms.scroll(function() {
                if (terms.scrollTop() + terms.height() >= termsInner.height()) {
                    submit.unbind('click').bind('click', showTest);
                    jQuery("a#submit").removeClass("disablebtn");
                }
            });

            function showTest() {
                jQuery("a#submitbutton").removeClass("disablebtn");
                jQuery("a#submit").removeClass("disablebtn");
                jQuery('a#submit').click(function() {
                jQuery("a#submitbutton").removeClass("disabled");
            });
            }

});
</script>
</head>
<body>
<p id="instructions">Please read these terms and conditions  now. <b>You must scroll to the bottom before  continuing.</b></p>
<div id="terms">
    <div id="termsInner">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam  sit amet mauris rhoncus libero congue interdum a ac dolor. In tellus  enim, vulputate nec rhoncus nec, sollicitudin non lorem. Nunc tempor  massa nec nulla pulvinar et aliquet nibh semper. Quisque vulputate  tortor quis ligula porttitor quis facilisis ipsum rutrum. Praesent sed  posuere massa. Quisque et est ac magna bibendum scelerisque. Nunc eget  velit ac arcu aliquet venenatis. Mauris porttitor, nunc nec scelerisque  condimentum, nisl ipsum laoreet lorem, sed rutrum odio quam eu ligula.  Praesent et mi justo, in tempus lacus. Suspendisse interdum adipiscing  urna aliquam tempus. Vestibulum nec posuere nisi.
        </p>
        <p>

    </div>
</div>
<a href="#" class="button disablebtn" id="submit">I Agree to CLEAR's Terms & Conditions</a>
<a href="#" id="submitbutton" class="subButton disabled">Submit</a>

这实际上修复了双击＃submitbutton删除类：

<script type="text/javascript">
terms.scroll(function() {
        if (terms.scrollTop() + terms.height() >= termsInner.height()) {
                        jQuery("a#submit").removeClass("disablebtn");
                            submit.unbind('click').bind('click', showTest);
                        jQuery('a#submit').click(function() {
                        jQuery("a#submitbutton").removeClass("disabled");
                            });
                        }
                    });

                    function showTest() {
                        jQuery("a#submitbutton").removeClass("disablebtn");
                        jQuery("a#submit").removeClass("disablebtn");

                    }
</script>

Answer 1

甚至不打扰所有绑定和解除绑定。让你的一个事件处理程序找出适合的操作。您可以使用一个简单的布尔变量来跟踪用户是否已经到达底部：

var scrolled = false;
terms.scroll(function() {
    scrolled = true;
    jQuery("a#submit").removeClass("disablebtn");
});

submit.bind('click', function() {
    if (scrolled) {
        showTest();
    } else {
        instructions.addClass('highlighted');

        setTimeout(function() {
            instructions.removeClass('highlighted');
        }, 2000);
    }
});

绑定和解除绑定让我感到困惑

1 个答案: